Question

So I am styling a table, and I’d like to make quite a fancy underline for the table headings.

I’ve though hard and had a look on the internet but couldn’t find anything.

This is the table structure:

<table>
    <thead>
        <tr>
            <td>Number</td>
            <td>Name</td>
            <td>Address</td>
        </tr>
    </thead>

    <tbody></tbody>
</table>

And my current styling:

table {
    width: 100%;
}

    table thead {
        font-weight: bold;
    }

        table thead td {
            margin-right: 5px;
            border-collapse: separate;
            border-spacing: 10px 5px;
            border-bottom: 2px solid #427AA8;
        }

    table tbody {
        font-size: 90%;
    }

        table tbody tr {
            line-height: 2em;
            border-bottom: 1px solid #CCC;
        }

        table tbody td {
            padding: 0 5px;
        }

Here is a jsfiddle of the code: http://jsfiddle.net/tYA4e/1/

What I am looking for is a break in the border between the columns, but only in the thead.

And an example of what I am trying to achieve: http://i.imgur.com/OHrhJ.jpg

Is there a way to achieve this with some simple CSS?

Answer 1

A border will, necessarily, extend the full width of its element; therefore to extend a border only partially across the width of an element that border must be applied to a child element, sized accordingly.

That said, the only way this is achievable would seem to be with nesting an element within the td (in this case a span), and using the following CSS:

table thead td span {
    display: inline-block;
    width: 80%;
    border-bottom: 2px solid #427AA8;
}

JS Fiddle demo.

As an aside, though, it’s worth noting that, for table-headings, the th (table-heading) element might be more appropriate for your use in this case.

On further thought it is, of course, also possible to use styled hr elements, which allows you to give pixel-level control over the hr‘s width in that it can extend up to, in this example, 10px from the right edge of the parent td):

table thead td hr {
    width: 80%;
    margin: 0 10px 0 0;
    border-bottom: 2px solid #427AA8;
}

JS Fiddle demo.