CSS：<tbody> 上的边框顶部未应用答案

【问题标题】：CSS: border-top on <tbody> not being appliedCSS：<tbody> 上的边框顶部未应用
【发布时间】：2014-04-30 16:44:23
【问题描述】：

我不知道为什么<tbody> 上的样式似乎不起作用：(jsfiddle)。我究竟做错了什么？

<!DOCTYPE html><html>
<head>
    <title>Test</title>
</head>
<body>
    <table class="basket">
        <tr class="head">
            <th class="title">Product</th>
            <th class="price">Unit Price</th>
            <th class="quantity">Quantity</th>
            <th class="total">Total</th>
        </tr>
                    <tr class="item">
            <td class="title"><a href="#">Product 1</a></td>
            <td class="price">&pound;0.30</td>
            <td class="quantity"><input value="2"/></td>
            <td class="total">&pound;0.60</td>
        </tr>
        <tbody class="ordersummary" style="border-top: 3px solid blue;">
            <tr class="subtotal">
                <td colspan="3" class="label">Subtotal</td>
                <td class="value">&pound;0.60                       </td>
            </tr>
            <tr class="shipping">
                <td colspan="3" class="label">Shipping</td>
                <td class="value">&pound;0.00</td>
            </tr>
            <tr class="total">
                <td colspan="3" class="label">Total</td>
                <td class="value">&pound;0.60</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

【问题讨论】：

标签： html css html-table

【解决方案1】：

Demo Fiddle

你需要添加：

table {border-collapse: collapse;}

顺便说一句，您还应该将样式与内容分开，并将 CSS 放在单独的样式表中。

Alternative Solution

添加：

display:block

致您的tbody。

【讨论】：

关于样式表 - 是的，我这样做只是为了强调问题。为什么需要display: block？这个之前的问题没有提到：stackoverflow.com/questions/6712946/add-borders-on-tbody
@Jodes，您可能还想看看使用 table {border-collapse: collapse;} 作为替代方案
这打破了表格布局：数字不会出现在“总计”列中。
@JukkaK.Korpela - 查看我的最后评论/修订
但他们确实提到了“或者，如果您的目标是那些不提供带边框样式的 tbody 选项的浏览器，您可以使用以下命令定位 tbody 中的特定单元格：” .

【解决方案2】：

这可能可行：

tbody > tr:first-child > td {
    border-top: 3px solid blue;
}

但是！关于使用 CSS 设置 HTML 样式的常规规则以表格结束。

【讨论】：