html - 如何使表格标题的高度彼此不同？

Question

我正在尝试制作一个具有不同大小标题的表格，如下图所示:

我可以使用 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 在文档中重新创建表格:

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