CODEWITHSUNDEEP
htmlcsscss-tables
Squirrl
Squirrl

Reputation: 4966

How do I make table headers different heights from one another?

I'm trying to make a table with different sized headers like seen in this image:

enter image description here

I am able to change the widths with css, but not the height. 

th:nth-child(3) {
    background-color:green !important;
    height:20%;
    width:5%;
    padding:5%;
}
th:nth-child(1),th:nth-child(2) {
    background-color:purple !important;
    height:50% !important;
    width:1%;
    padding:1%;
}

https://jsfiddle.net/pq01hc7y/2/

Upvotes: 0

Views: 211

Answers (1)

Phin Jensen
Phin Jensen

Reputation: 441

This fiddle recreates the table in the document:

https://jsfiddle.net/fucrza92/

The most important part is this:

<tr>
  <th rowspan="2">MATERIAL</th>
  <th rowspan="2">ALLOY</th>
  <th colspan="5">TUBE OD (INCH)</th>
</tr>
<tr>
  <th>0.250</th>
  <th>0.375</th>
  <th>0.500</th>
  <th>0.625</th>
  <th>0.750</th>
</tr>

Using rowspan and two header rows makes it possible for some header elements to be taller than others. The same principle is applied to columns with colspan for the TUBE OD element.

Upvotes: 3

Related Questions