如何修復表格thead和可滾動的正文（標題包含3行）

Question

我有以下問題：我的桌子上有大thead（3行）。 我想修復thead和肢體滾動。 我用jQuery

但是當我向下滾動時，邊框會消失。

 $(document).ready(function() { document.querySelector(".tableContainer").addEventListener("scroll", function() { var translate = "translate(0," + this.scrollTop + "px)"; this.querySelector("thead").style.transform = translate; }); }); 

  .TableData { border-collapse: collapse; font-family: "Arial Narrow", "Franklin Gothic Medium", "Arial"; font-size: 1.05em; width: 100%; height: 60vh; overflow-x: hidden; .TableData td, .TableData th { border: 1px solid black; padding: 2px; } .TableData>thead>tr>th { border: 1px solid black; padding: 2px; background: #d9edf7; vertical-align: middle; text-align: center; } .TableData thead>tr { border: 1px solid black; } .TableData>tbody>tr>th { border: 1px solid black; padding: 2px; } .TableData>tbody>tr.tr1 { background: #eee; font-weight: 600; } .TableData>tbody>tr.tr1>td { vertical-align: middle; text-align: center; } .TableData>tbody>tr.tr2 { background: #d9edf7; font-weight: 600; } .TableData>tbody>tr.tr2>td { vertical-align: middle; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="tableContainer" style="overflow-x:hidden;height:500px;"> <table class="TableData"> <thead> <tr> <th rowspan="3">some text</th> <th rowspan="3">some text</th> <th>some text</th> <th colspan="6">some text</th> <th colspan="4">some text</th> <th colspan="10">some text some text</th> <th colspan="3">some text</th> <th rowspan="3">some text</th> </tr> <tr> <th rowspan="2">%</th> <th rowspan="2">№ </th> <th rowspan="2">Вх-%</th> <th colspan="3">some text</th> <th rowspan="2">some text</th> <th colspan="2">1</th> <th colspan="2">2</th> <th rowspan="2">Вх-%</th> <th colspan="3">NTU</th> <th rowspan="2">ΔNTU T2-T1</th> <th rowspan="2">Кt,some text</th> <th colspan="4">some text</th> <th rowspan="2">some text</th> <th rowspan="2">% some text</th> <th rowspan="2">NTU</th> </tr> <tr> <th>Т0</th> <th>Т1</th> <th>Т2</th> <th>Вх-%</th> <th>NTU</th> <th>Вх-%</th> <th>NTU</th> <th>Т0</th> <th>Т1</th> <th>Т2</th> <th>А420</th> <th>Т420</th> <th>А440</th> <th>Т440</th> </tr> </thead> </table> </div> 

PS我嘗試更多的組合，與CSS，JS。 這個jQuery很好的解決方案，但出了點問題。 有人幫我解決這個問題。 https://jsfiddle.net/testuser1234/w1sb26y3/嗎？

Answer 1

您將必須固定tbody的高度，然后將overflow-y設置為允許滾動。

您可以嘗試這樣的操作（摘自這篇文章-我如何讓桌子的主體滾動但將其頭部固定在適當的位置？ ）

.TableData thead {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.TableData tbody {
    display: block;
    height: 10em; //CHANGE THIS ACCORDING TO NEED
    overflow-y: scroll;
}
.TableData tbody tr {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.TableData th, .TableData td {
    width: auto;
    border: 1px solid;
}