CODEWITHSUNDEEP
htmlcss
Samuel Parkinson
Samuel Parkinson

Reputation: 3112

Fancy border in a HTML table

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?

Upvotes: 0

Views: 2968

Answers (2)

Daniel
Daniel

Reputation: 609

You could also use th for heading cells -> no more need for seperating the rows into groups with thead and tbody - less markup and less css.

<table>
    <tr>
        <th>headlinecell</th>
    </tr>
    <tr>
        <td>contentcell</td>
    </tr>
</table>

now just style the th and td.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 4

Related Questions