HTML表格中的<tr>元素下未显示边框[重复]

Question

我正在尝试在表格标题的底部添加边框。 但是没有显示没有任何错误。 当我检查元素时，我可以看到它没问题。

这是我的代码：

.cart_table{
width:100%;} 

.cart_table_header{
border-bottom: 1px solid #ffb215;
padding: 8px;
background-color: #dedede;}
.cart_table tr td{
border-bottom: 1px solid #ccc;
}

这里是 HTML

        <table class="cart_table" >
        <tr class="cart_table_header">
            <th> </th>
            <th> Item </th>
            <th> Price </th>
            <th> Quantity </th>
            <th> Total  </th>
            <th> Remove </th>
        </tr>
        <tr valign="middle">
            <td> <img src="images/product-image.jpg" height="50px width:50px;"> </img> </td>
            <td> Item name here</td>
            <td> $12</td>
            <td> 2</td>
            <td> $24</td>
            <td> <a href="#"> <img src="images/delete_icon_normal.png" > </img> </a> </td>
        </tr>
        <tr valign="middle">
            <td> <img src="images/product-image.jpg" height="50px width:50px;"> </img> </td>
            <td> Item name here</td>
            <td> $12</td>
            <td> 2</td>
            <td> $24</td>
            <td> <a href="#"> <img src="images/delete_icon_normal.png" > </img> </a> </td>
        </tr>
    </table>

Answer 1

尝试将border-collapse:collapse; 添加到您的表格规则中：

.cart_table {
    width:100%;
    border-collapse:collapse;
}

jsFiddle example

Answer 2

tr 元素不能自己显示边框，但可以添加到第 th 元素

.cart_table_header th {
    border-bottom:1px solid black;
}

见this jsFiddle

如果你想让边框看起来像一条连续的线，你可以像@j08691所说的那样将border-collapse:collapse;添加到表格类中。