0

我有一张表，其列数和行数未知（jQuery 稍后会填写）。我需要确保列标题贴在页面顶部，这样当用户滚动离开时，他们就不会迷路。我尝试了很多不同的方法来将标题粘贴到顶部，以下是唯一有效的方法。

所以我在它上面建立了第二个表，它只包含列标题。然后我将它向下移动到原始表格的列标题上方。通过这种方式，用户可以滚动并使其看起来像是列头停留在那里。我在 bootstrap 2 中有这个工作。然后我迁移到 bootstrap 3，现在 z-index 不起作用。

基本上现在发生的情况是，应该与底部表重叠的顶部表实际上是在下面的表。我已经使用 z-index 玩了很多东西，但似乎没有任何效果。它总是在下面而不是在上面。

这是我的html。

    <!--ResultSet table columns only TOP TABLE-->
<div class="row tableScroll" id="resultsColumns" >
    <table class="table table-condensed table-hover table-striped table-bordered" id="ResultSetTableColumns">
        <thead></thead>
        <tbody></tbody>
    </table>
</div>

<!-- ResultSetTable BOTTOM TABLE-->
<div class="row tableScroll" id="results">
    <table class="table table-condensed table-hover table-striped table-bordered" id="ResultSetTable">
        <thead></thead>
        <tbody></tbody>
    </table>
</div>

还有我的 CSS

    #results{
        overflow: auto;
        max-height: 440px;
        margin-left:.1em;
        z-index: -1000;
    }
    #resultsColumns{
        overflow:hidden; 
        margin-left:0.1em; 
        z-index: 8000;
    }
    #ResultSetTable{
        z-index: -1000;
    }
    #ResultSetTableColumns{
        margin-bottom: -2em;
        z-index: 8000;
    }

或者也许你们知道在不改变行宽的情况下使底部表格标题消失的更好方法？

谢谢！

4

1 回答 1

1

你需要给这些元素赋予一个position不同于默认值的值static。

只有这样 z-index 才能起作用——它仅适用于定位元素。

于 2013-10-20T22:44:12.450 回答