1

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>
Jodes
  • 14,118
  • 26
  • 97
  • 156

2 Answers2

3

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.

SW4
  • 69,876
  • 20
  • 132
  • 137
  • Regarding stylesheets - yes, I just did it this way to emphasise the problem. Why is the `display: block` needed? This previous question doesn't mention it: http://stackoverflow.com/questions/6712946/add-borders-on-tbody – Jodes Apr 30 '14 at 08:39
  • @Jodes, you may also want to look at using `table {border-collapse: collapse;}` as an alternative – SW4 Apr 30 '14 at 08:44
  • 1
    This breaks the tabular layout: the figures do not appear in the “Total” column. – Jukka K. Korpela Apr 30 '14 at 08:44
  • @JukkaK.Korpela - see my last comment / revision – SW4 Apr 30 '14 at 08:45
  • 1
    But they do mention "Or, if you're targeting those browsers that don't offer the option to style the tbody with a border, you can target specific cells within the tbody using the following:". – anddoutoi Apr 30 '14 at 08:45
0

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.

anddoutoi
  • 9,973
  • 4
  • 29
  • 28