CSS

Question

我想让我的右边框直接向下延伸到 table 列，如下图所示：

我的看起来像这样：

如果你仔细观察，这条线并没有一直延伸到底部，而是散落在底部。

这是我的 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>[=12=].45</h4></td>
<td><h4>.59</h4></td>
<td><h4>.90</h4></td>
<td><h4>.59lb</h4></td>
<td><h4>.29</h4></td>
<td><h4>[=12=].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

我添加了边框折叠属性，它确实消除了间距，但是，线条仍然没有一直延伸到底部，请参见下图：

更新 2

在帮助下它看起来像下图（请看第一行而不是第二行）。单词彼此更加分散，底部的间距消失了，因为它应该看起来像第一张图片。

Answer 1

你可以试试这个：

table {
    border-collapse: collapse;
}

有了这个 border-spacing 和 empty-cells 属性就没有效果了

Answer 2

我会改变你格式化 table 的方式。与其将所有内容都放在一个 table 中，不如尝试为 table.

中的每个水果嵌套一个 table

这是一个例子：

<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>[=10=].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>

Answer 3

请参阅下面的代码 - 我已将评论添加到 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>[=11=].45</h4></td>
   <td><h4>.59</h4></td>
   <td><h4>.90</h4></td>
   <td><h4>.59lb</h4></td>
   <td><h4>.29</h4></td>
   <td><h4>[=11=].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 - 如何在 Table 中的列之间添加行

CSS - How to Add Lines Between Just the Columns in a Table

html

css-tables