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

Question

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

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/

Answer 1

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.