html - 2 つのテーブルの Z インデックスが正しく機能しない

Question

不明な数の列と行を持つテーブルが 1 つあります (後で jQuery が入力します)。列ヘッダーがページの上部にくるようにして、ユーザーがスクロールして離れたときに迷子にならないようにする必要があります。ヘッダーを上部に貼り付けるために非常に多くの異なるアプローチを試みましたが、機能したのは次の方法だけです。

そこで、その上に、列ヘッダーのみを含む 2 つ目のテーブルを作成しました。次に、元のテーブルの列ヘッダーの上に移動しました。このようにして、ユーザーはスクロールして、列の見出しがそこにとどまっているように見せることができます。これはブートストラップ 2 で機能していました。その後、ブートストラップ 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;
    }

または、行幅を変更せずに一番下のテーブルのヘッダーを非表示にするより良い方法を知っているでしょうか?

ありがとう！