Question

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

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

我想要做的是让它们的某些列/标题比其余的更高一些，如下所示：

enter image description here

我已尝试设置<th>单元格的高度，但这不能正常工作。标题内部有一些元素，并试图创建一个:before伪元素，然后修复它的高度似乎不起作用。

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

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

在第一个实例中，我更喜欢CSS解决方案，并且可以根据需要轻松添加类或ID。我宁愿不添加额外的标记，但如果需要则会放松。 使用Javascript来额外注入元素不是一种选择！

有关如何使用CSS创建比其他单元格更高的表格标题单元格的任何想法吗？

Answer 1

表格大小调整算法将强制一行中的所有表格单元格采用相同的高度，而不是那个。

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

最后，您需要对表格进行上边距/填充，以便为超高标题提供空间。

至少它是一个概念证明，也许是一个开始的地方。

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

注意：我必须在表上应用一些余量，以便绝对伪元素在视图中。

Answer 3

我们的想法是删除左上角和右上角的单元格边框，并使用伪元素创建它们。 标记保持不变，甚至类=＆＃34;重要＆＃34;不需要。

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

如何使一个表列标题高于其余列？

3 个答案: