CSS: border-top on <tbody> not being applied

StackOverflow https://stackoverflow.com/questions/23383350

  •  12-07-2023
  •  | 
  •  

Question

I'm stuck on why the style on the <tbody> doesn't seem to be working: (jsfiddle). What am I doing wrong? 

<!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>
Was it helpful?

Solution

Demo Fiddle

You need to add:

table {border-collapse: collapse;}

Incidentally, you should also separate out your styles from content and put your CSS in a separate stylesheet.

Alternative Solution

Add:

display:block

To your tbody.

OTHER TIPS

This could probably work:

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

BUT! Normal rules about styling HTML with CSS ends at tables.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top