テーブルヘッダーを互いに異なる高さにするにはどうすればよいですか？

Question

私はこの画像で見られるような異なるサイズのヘッダーを使用してテーブルを作成しようとしている：

私はCSSを使用した幅ではなく高さを変更することができています。

https://jsfiddle.net/fucrza92/

最も重要な部分はこれです：

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

このバイオリンは、ドキュメント内のテーブルを再作成

<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> 

rowspanと2つのヘッダ行を使用していくつかのヘッダー要素が他のヘッダー要素よりも背を高くすることを可能にします。同じ原則がTUBE OD要素のcolspanの列に適用されます。