如何使 table headers 高度彼此不同？

Question

我正在尝试用不同尺寸 headers 制作一个 table，如图所示：

我可以使用 css 更改宽度，但不能更改高度。

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

此 fiddle 重新创建文档中的 table：

https://jsfiddle.net/fucrza92/

最重要的部分是：

<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 和两个 header 行可以使某些 header 元素比其他元素高。同样的原则适用于 TUBE OD 元素具有 colspan 的列。

如何使 table headers 高度彼此不同？

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

html

css

css-tables