Question

我正在使用显示行的表（angular-4-data-table）。我想有一个固定了标题的垂直滚动条。我试图将style= position: fixed;添加到 <thead>部分。我可以看到固定的标题，但是当我滚动浏览时，表数据部分正在标题的顶部移动。

 <table class="table table-condensed table-bordered data-table">
            <thead style= position: fixed;>
</thead>
<tbody>
</tbody>
</table>

我可以在tbody上应用任何样式，以便在滚动时隐藏在标题下方。

Answer 1

tbody标记是相对的，因此它将仅作为页面中的所有其他元素使用。您应该仅对“特殊”元素（thead）进行操作，以使浏览器可以使用尽可能多的公共元素。

您是否尝试过将z-index:999;用作广告样式？

Answer 2

好，现在我记得要怎么做。

在每个<th>内插入带有列标题内容的<div>，而不是使用CSS，必须将div的绝对位置设置为表格的绝对位置，并将th的高度设置为0。另外，您必须给包含表的<div>加上顶部填充，以留出假<th>的空间这不是一个不错的代码，但是没有JS即可使用。

<style>
    .container { padding-top: 50px; }
    .inner { height: 100px; overflow-y: auto; }
    .t { width: 100%; table-layout: fixed; }
    .t thead th { height: 0 !important; }
    .t thead th > div {
        position: absolute;
        height: 50px;
        line-height: 50px;
        top: 0;
    }
</style>
<div class="container">
    <div class="inner">
        <table class="t">
            <thead><tr>
                <th><div>col 1</div></th>
                <th><div>col 2</div></th>
            </tr></thead>
            <tbody>
                <tr>
                    <td>a</td>
                    <td>b</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

滚动时如何使表格标题固定，并且表格滚动变为背景

2 个答案: