Question

我总是在thead th标签中使用Bootstrap网格类，所以我不再需要在tbody个单元格上重复上课。例如：

<table>
    <thead>
        <tr>
            <th class="col-xs-2">#</th>
            <th class="col-xs-10">Title</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
    </tbody>
</table>

现在，我正在实现一个不应该使用表头的方案。我在thead上尝试了display: none和visibility: hidden，但没有一个有效。

我想我有以下解决方案（这些都是坏的INMHO！）：

向每个tbody单元格添加网格类（在我的大型动态表中是一件坏事）
使用css通过索引来定位单元格，例如：nth-child()这也是不好的，因为重复的CSS规则，并且会很麻烦，因为表格可能会动态变化，我总是需要SCSS编译！
thead 1px高度，没有内部文字或任何内容。

有更好的解决方案吗？

Answer 1

这样的事情应该有效：

thead p {
    margin: 0;
    opacity: 0;
    height: 0;
}

当然p只是一个例子，你可以用任何其他标签来做到这一点。

更新小提琴：https://jsfiddle.net/8brbuy6v/1

Answer 2

感谢@Johann Kratzik建议，我设法通过隐藏thead内容并在height: 0上使用thead来解决我自己的问题。

thead { opacity: 0; border: 0 none; height: 0; }
thead * { margin: 0; padding: 0; border: 0 none; height: 0px; }

隐藏thead但保持其单元格宽度为tbody

2 个答案: