如何使一 table 列 header 比其他列高？

Question

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

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

我想做的是让它们中的一些 columns/headers 比其他的高一点，像这样：

我试过设置 <th> 单元格的高度，但效果不佳。 header 中有一些元素，尝试创建一个 :before 伪元素，然后固定其高度似乎不起作用。

我什至尝试添加 <col> 定义，但它们似乎对我讨厌的 colspan 单元格有问题，但我可能做错了。

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

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

关于如何使用 CSS 创建比其余单元格高的 table header 单元格的任何想法？

Answer 1

table 大小调整算法将强制一行中的所有 table 单元格具有相同的高度，没有办法解决这个问题。

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

最后，你需要顶margin/padding到table，为额外高的headers提供空间。

至少它是一个概念证明，也许是一个起点。

table {
    margin-top: 75px;
}
th {
    border: 1px dotted gray;
    position: relative;
}
.important div {
    height: 75px;
    position: absolute;
    width: inherit;
    bottom: 0;
    border: 1px dotted gray;
}

<table>
  <thead>
    <tr>
       <th>A header</th>
        <th class="important" colspan="2"><div>An important header!</div></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>

Answer 2

嗯，我只能想到绝对定位一个伪元素，设置line-height为0来达到你想要的效果，不过在IE 7上不行

看看这里 Fiddle（尚未在 IE 8 上测试）

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 上应用一些边距，以便可以看到绝对伪元素。

Answer 3

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

http://jsfiddle.net/of79mcoj/

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

如何使一 table 列 header 比其他列高？

How does one make one table column header taller than the rest?

html

css

html-table