CSS -如何在表格中的列之间添加行
CSS -如何在表格中的列之间添加行
提问于 2018-06-13 03:19:31
我正在尝试让我的右边框直接沿着表列移动，如下图所示：
我的是这样的：
如果你仔细观察，这条线并不会一直延伸到底部，它看起来像是分散在底部。
下面是我的html：
<div class="Popular">
<table>
<tr>
<td class="column2"><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_670662b7-080f-41a4-934b-2c0bc6a821a6.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_d173fb5e-b78b-4aa5-a481-6b744ad8e041.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_bd6e7f09-f4fe-44f9-96c9-fab317f09644.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_34952e34-5414-456c-8b8f-b469f55b4fdc.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_97c737b9-1e44-41c4-9c47-c92b7ddd2455.jpg" width="233px" height="200px"></td>
</tr>
<tr>
<td><h4>$0.45</h4></td>
<td><h4>$2.59</h4></td>
<td><h4>$1.90</h4></td>
<td><h4>$2.59lb</h4></td>
<td><h4>$6.29</h4></td>
<td><h4>$0.99</h4></td>
</tr>
<tr>
<td>Banana</td>
<td>Avocado</td>
<td>Full Apple</td>
<td>Yellow Onion</td>
<td>Strawberries</td>
<td>Large Lemon</td>
</tr>
<tr>
<td>-0.41lbs</td>
<td>each</td>
<td>-0.5lbs</td>
<td>n/a</td>
<td>16Oz</td>
<td>each</td>
</tr>
</table>
</div>这是我的CSS：
.Popular{
background:white;
height:350px;
width:80%;
margin:0 0 0 100px;
}
.Popular td{
border-right:1px solid gray;
}
.Popular ul{
margin:0;
}
.Popular li{
list-style:none;
}
.Popular h4{
margin:0;
}
.column2{
border-right:1px solid gray;
padding:5px 10px;
}更新1
我添加了边框colapse属性，它确实去掉了间距，但是，这条线仍然不会一直到底部，请参见下图：
更新2
有了帮助，它看起来如下图所示(见第一行，而不是第二行)。单词更多地从彼此之间扩散开来，底部的间距也没有了，就像第一张图片中应该是的那样。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-13 03:53:32
参见下面的代码-我已经在CSS中添加了注释。
.Popular {
width: 80%;
margin-left: 100px;
overflow: auto;
}
/* Collapse the border, to prevent gaps between the table rows/cells */
.Popular table {
border-collapse: collapse;
}
/* Add 1 em padding to left/right of all cells (of all rows after the first, to not mess with the images) */
.Popular tr + tr td {
padding: 0 1em;
}
/* Add 3em of padding to the bottom of all table cells, in the last table row; this replaces setting a height on the parent container - to simulate height */
.Popular tr:last-child td {
padding-bottom: 3em;
}
.Popular td {
margin: 0;
border-right: 1px solid gray;
}
.Popular ul {
margin:0;
}
.Popular li {
list-style:none;
}
.Popular h4 {
margin:0;
}
.column2 {
border-right:1px solid gray;
padding:5px 10px;
}<div class="Popular">
<table>
<tr>
<td class="column2"><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_670662b7-080f-41a4-934b-2c0bc6a821a6.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_d173fb5e-b78b-4aa5-a481-6b744ad8e041.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_bd6e7f09-f4fe-44f9-96c9-fab317f09644.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_34952e34-5414-456c-8b8f-b469f55b4fdc.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_97c737b9-1e44-41c4-9c47-c92b7ddd2455.jpg" width="233px" height="200px"></td>
</tr>
<tr>
<td><h4>$0.45</h4></td>
<td><h4>$2.59</h4></td>
<td><h4>$1.90</h4></td>
<td><h4>$2.59lb</h4></td>
<td><h4>$6.29</h4></td>
<td><h4>$0.99</h4></td>
</tr>
<tr>
<td>Banana</td>
<td>Avocado</td>
<td>Full Apple</td>
<td>Yellow Onion</td>
<td>Strawberries</td>
<td>Large Lemon</td>
</tr>
<tr>
<td>-0.41lbs</td>
<td>each</td>
<td>-0.5lbs</td>
<td>n/a</td>
<td>16Oz</td>
<td>each</td>
</tr>
</table>
</div>
Stack Overflow用户
发布于 2018-06-13 03:25:36
您可以尝试这样做：
table {
border-collapse: collapse;
}在此情况下，边框间距和空单元格属性不起作用
Stack Overflow用户
发布于 2018-06-13 03:32:14
我会改变你格式化表格的方式。与其把所有的东西都放在一张桌子上，不如试着在你的桌子里为每个水果嵌套一张桌子。
下面是一个示例：
<table>
<tr>
<td class="column2">
<table>
<tr>
<td><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
</tr>
<tr>
<td><h4>$0.45</h4></td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>-0.41lbs</td>
</tr>
</table>
</td>
// Other products would follow the same convention
</tr>
</table>然后，对于你的CSS，去掉这个：
.Popular td {
border-right:1px solid gray;
}因为您不需要每个<td>上的边框，只需要包含嵌套<table>的<td>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50824350
复制相关文章
相似问题