Html 如何使一个表列标题比其他表列标题高？

我有一个数据表，其中一些列比其他列更重要，需要一种直观区分它们的方法

<table>
  <thead>
    <tr>
       <th>A header</th>
       <th class="important" colspan="2">An important header!</th>
       <th class="important" >Also important</th>
       <th>Boring header</th>
    </tr>
    <tr>
       <th>Sub header</th>
       <th>Part 1</th>
       <th>Part 2</th>
       <th>Sub header</th>
       <th>Sub header</th>
    </tr>
  </thead>
  <tbody>
    <!-- lots of data here -->
  </tbody>
</table>

首先，我更喜欢CSS解决方案，并且可以根据需要轻松添加类或ID。我不想添加额外的标记，但如果需要，我会松口。使用Javascript额外注入元素不是一个选项

---

关于如何使用CSS创建比其他单元格更高的表头单元格，您有什么想法吗？

表格大小调整算法将强制一行中的所有表格单元格具有相同的高度，这是无法绕过的

一种方法需要额外的标记。将内容包装在包装器中，并使用绝对定位将其从正常内容流中取出。您需要调整表单元格上的任何边框属性，并将它们添加到子包装块中

最后，您需要为表格添加上边距/填充，以便为额外的高标题提供空间

至少这是一个概念的证明，也许是一个起点

表格{
边缘顶部：75px；
}
th{
边框：1px点灰色；
位置：相对位置；
}
.重要部门{
高度：75px；
位置：绝对位置；
宽度：继承；
底部：0；
边框：1px点灰色；
}

标题
一个重要的头球！
同样重要
镗头
副标题
第一部分
第二部分
副标题
副标题

表格大小调整算法将强制一行中的所有表格单元格具有相同的高度，无法绕过该高度

一种方法需要额外的标记。将内容包装在包装器中，并使用绝对定位将其从正常内容流中取出。您需要调整表单元格上的任何边框属性，并将它们添加到子包装块中

最后，您需要为表格添加上边距/填充，以便为额外的高标题提供空间

至少这是一个概念的证明，也许是一个起点

表格{
边缘顶部：75px；
}
th{
边框：1px点灰色；
位置：相对位置；
}
.重要部门{
高度：75px；
位置：绝对位置；
宽度：继承；
底部：0；
边框：1px点灰色；
}

标题
一个重要的头球！
同样重要
镗头
副标题
第一部分
第二部分
副标题
副标题

好吧，我只能想绝对定位一个伪元素，并将线高度设置为0以实现您想要的，但在IE 7上不起作用

看看这里（没有在IE 8上测试过）

---

注意：我必须在表格上加一些边距，这样绝对伪元素就可以看到了。

好吧，我只能考虑绝对定位伪元素，并将线高度设置为0以实现您想要的，但在IE 7上不起作用

看看这里（没有在IE 8上测试过）

---

注意：我必须在表格上应用一些边距，以便可以看到绝对伪元素。

我们的想法是删除左上角和右上角的单元格边框，并使用伪元素创建它们标记保持不变，即使不需要class=“important”

---

其思想是删除左上角和右上角的单元格边框，并使用伪元素创建它们标记保持不变，即使不需要class=“important”

---

是否如图所示向表格单元格添加边框？我知道的唯一方法是添加另一行，然后使用

rowspan

属性。或嵌套表。。。或者使用其他元素创建边框。AFAIK否，但您可以添加一行并使用rowspan。。这看起来是最简单的方法了…@MarcAudet边框就是{code>th{border:1px纯黑；}是否如图所示向表格单元格添加边框？我知道的唯一方法是添加另一行，然后使用

rowspan

属性。或嵌套表。。。或者使用其他元素创建边框。AFAIK否，但您可以添加一行并使用rowspan。。这看起来是最简单的方法了…@MarcAudet边界只是

th{border:1px纯黑；}

。我只是用了

position:relative

。我可能会添加我的作为替代，但我会接受这一点，因为这有助于我越过这条线。非常感谢！这与我最终能够做到的非常接近。我只是用了

position:relative

。我可能会添加我的作为替代，但我会接受这一点，因为这有助于我越过这条线。非常感谢！

<table>
  <col> <!-- I can style this maybe? -->
  <thead>

th.important {
    border-top: 0;
    vertical-align: top;
    line-height: 0;
}

th.important:before {
    height: 30px;
    content: "";
    display: block;
    position: absolute;
    top:-30px;
    left:-1px;
    right: -1px;
    border: 1px solid #000;
    border-bottom: 0;
}

table {
    border-collapse: collapse;
}

th {
    border: 1px solid black;
    padding: 30px 20px;
}

tr:first-child th:first-of-type,
tr:first-child th:last-of-type {
    position: relative;
    border-top: 0;
    padding-top: 60px;
}

tr:first-child th:first-of-type {
    border-left: 0;
}

tr:first-child th:last-of-type {
    border-right: 0;
}

tr:first-child th:first-of-type::before,
tr:first-child th:last-of-type::before {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid black;
    border-bottom: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%;
}

tr:first-child th:first-of-type::before {
    border-right: 0;
}

tr:first-child th:last-of-type::before {
    border-left: 0;
}