边框未显示在下方<;tr>;HTML表中的元素

边框未显示在下方<;tr>;HTML表中的元素,html,css,Html,Css,我正在尝试在我的表格标题的底部添加边框。 但显示时没有任何错误。 当我检查元件时,我可以看到它是正常的 这是我的密码: .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

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

这是我的密码:

.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>

项目
价格
量
全部的
去除
项目名称在这里
$12
2.
$24
项目名称在这里
$12
2.
$24

尝试添加
边框折叠:折叠到您的表规则:

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

tr元素本身不能显示边框,但您可以将其添加到th元素中

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


如果希望边框看起来像一条连续线,可以添加
边框折叠:折叠
到table类,如@j08691所说。

这不是我想要的,而是谢谢。我想要没有断点是的,当我看到被接受的答案时我明白了。无论如何值得一试:)