How does one make one table column header taller than the rest? - html

Question

I have a table of data, with some columns more important than the others and need a way to visually distinguish them.
<table>
<thead>
<tr>
<th>A header</th>
<th class="important" colspan="2">An important header!</th>
<th class="important" >Also important</th>
<th>Boring header</th>
</tr>
<tr>
<th>Sub header</th>
<th>Part 1</th>
<th>Part 2</th>
<th>Sub header</th>
<th>Sub header</th>
</tr>
</thead>
<tbody>
<!-- lots of data here -->
</tbody>
</table>
What I want to do is make them some of the columns/headers a little taller than the rest, like this:
I've tried setting the height of the <th> cell, but that doesn't work properly. There are some elements inside the headers and trying to create a :before pseudo element, and then fixing its height isn't seeming to work.
I even tried adding <col> definitions, but they seemed to have trouble with the colspan cell I hate, but I could have been doing it wrong.
<table>
<col> <!-- I can style this maybe? -->
<thead>
In the first instance I'd prefer a CSS solution, and can easily add classes or ids as needed. I'd rather not add additional markup, but will relent if required. Using Javascript to extra inject elements is not an option!
Any ideas on how to create a table header cell that is taller than the rest of the cells using CSS?

Answer 1

The table sizing algorithm will force all the table cells in a row to take on the same height, no way around that.
One way of doing it requires extra markup. Wrap your content in a wrapper and take it out of the normal content flow using absolute positioning. You will need to adjust any border properties on the table cells and add them to the child wrapper blocks.
Finally, you need to a top margin/padding to the table to provide room for the extra tall headers.
At least it is a proof of concept, perhaps a place to start.
table {
margin-top: 75px;
}
th {
border: 1px dotted gray;
position: relative;
}
.important div {
height: 75px;
position: absolute;
width: inherit;
bottom: 0;
border: 1px dotted gray;
}
<table>
<thead>
<tr>
<th>A header</th>
<th class="important" colspan="2"><div>An important header!</div></th>
<th class="important" >Also important</th>
<th>Boring header</th>
</tr>
<tr>
<th>Sub header</th>
<th>Part 1</th>
<th>Part 2</th>
<th>Sub header</th>
<th>Sub header</th>
</tr>
</thead>
<tbody>
<!-- lots of data here -->
</tbody>
</table>

Answer 2

The idea is to remove the top-left and top-right cell borders and create them by using pseudo elements. Markups remain the same, even class="important" won't be needed.
http://jsfiddle.net/of79mcoj/
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
padding: 30px 20px;
}
tr:first-child th:first-of-type,
tr:first-child th:last-of-type {
position: relative;
border-top: 0;
padding-top: 60px;
}
tr:first-child th:first-of-type {
border-left: 0;
}
tr:first-child th:last-of-type {
border-right: 0;
}
tr:first-child th:first-of-type::before,
tr:first-child th:last-of-type::before {
content: "";
display: block;
position: absolute;
border: 1px solid black;
border-bottom: 0;
left: 0;
bottom: 0;
width: 100%;
height: 70%;
}
tr:first-child th:first-of-type::before {
border-right: 0;
}
tr:first-child th:last-of-type::before {
border-left: 0;
}

Answer 3

Well, I can only think of absolute positioning a pseudo element, and set line-height to 0 to achieve what you want, won't work on IE 7 though
have a look here Fiddle (haven't tested on IE 8)
th.important {
border-top: 0;
vertical-align: top;
line-height: 0;
}
th.important:before {
height: 30px;
content: "";
display: block;
position: absolute;
top:-30px;
left:-1px;
right: -1px;
border: 1px solid #000;
border-bottom: 0;
}
Notice: I have to apply some margin on the table so that the absolute pseudo elements are in view.