Question

我坚持为什么<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>

Answer 1

Demo Fiddle

您需要添加：

table {border-collapse: collapse;}

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

Alternative Solution

添加：

display:block

致tbody。

Answer 2

这可能有用：

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

BUT！关于使用CSS样式化HTML的常规规则以表格结尾。

CSS：未应用的border-top

2 个答案:

Demo Fiddle

Alternative Solution