具有水平和垂直滾動主體的固定表頭

Question

目標：

• 表頭和表體的列寬應相同。
• 表格標題固定在垂直滾動條上。
• 要在水平滾動上移動的表頭。
• 要在 HTML 的可滾動部分內顯示的標題。

問題陳述：

• 表格標題不會固定在垂直滾動上。
• 標題顯示在 HTML 的可滾動部分之外（當標題位置固定時）。

我看過很多帖子，但找不到這個特定問題陳述的解決方案。

我創建了兩個 JSFiddles 來演示問題陳述：

Fiddle01：解決方案作為一個單獨的模塊效果很好。 JSFiddle01

Fiddle02：解決方案在與其他 div 集成時不起作用。 JSFiddle02

任何幫助將不勝感激。

$(function() {
var $window = $(window);
var $table = $('table');
var $head = $table.find('thead');
var $body = $table.find('tbody');
var $headTds1 = $head.find('tr').eq(0).find('th');
var $headTds2 = $head.find('tr').eq(1).find('th');
var $bodyTds = $body.find('tr').eq(0).find('td');
var tableWidth = $table.outerWidth();
// console.log("Width:"+tableWidth);
var $tableNew = $('<table/>');
var cl = 0; // colspan total length
var cc = 0; // colspan count

$table.css({ width: tableWidth });
$tableNew
    .attr("class", $table.attr("class"))
    .css({ width: tableWidth });

$head.css({ background: '#fff' });

$.each($headTds1, function(index, value) {
    var $headTd = $(value);
    var colspan = $headTd.attr('colspan') || 0;

    if (colspan) {
        while (colspan) {
            addwidth($($headTds2[cl]), $($bodyTds[index + cl - cc]));
            colspan--
            cl++
        }
        cc++;
    } else {
        addwidth($headTd, $($bodyTds[index + cl - cc]));
    }
});

function addwidth($headTd, $bodyTd) {
    var headTdwidth2 = $headTd.outerWidth();
    var bodyTdwidth2 = $bodyTd.outerWidth();
    var width2 = headTdwidth2 > bodyTdwidth2 ? headTdwidth2 : bodyTdwidth2;

    $bodyTd.css({ 'width': width2 });
    $headTd.css({ 'width': width2 });

    var headTdwidth = $headTd.width();
    var bodyTdwidth = $bodyTd.width();
    var width = headTdwidth > bodyTdwidth ? headTdwidth : bodyTdwidth;
    $bodyTd.html('<div style="width: ' + width + 'px">' + $bodyTd.html() + '</div>');
    $headTd.html('<div style="width: ' + width + 'px">' + $headTd.html() + '</div>');
}

$head.appendTo($tableNew);
$tableNew.insertBefore($table);
// $table.css({ 'margin-top': $tableNew.height() });

$tableNew.css({ position: 'fixed' });

$window.scroll(reLeft);
$window.resize(reLeft);


function reLeft() {
    $tableNew.css({ left: $table.offset().left - $window.scrollLeft() });
}
});

Answer 1

您正在克隆表以修復表頭，更好的是您可以直接修復原始表的表頭，結果相同。

具有position:fixed更改相對於視口的寬度，這導致寬度在滾動時發生變化，您可以在此處查看https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19

方法：1

而不是position:fixed在th中使用relative並且它正在與具有min-height:100px的父div一起工作。

https://jsfiddle.net/chorasiapawankumar/krw0qpbL/62/

方法：2

在刪除我在下面的小提琴中評論過的父 div 的min-height時，您可以同時看到水平和垂直滾動條。

https://jsfiddle.net/chorasiapawankumar/vg7q3tyc/33/

Answer 2

不知道你是否可以/想要使用一個庫，但是floatHead工作得很好，它看起來像你想要的那樣......轉到鏈接頁面並單擊演示“運行 FloatHead”按鈕，你會看到它在運行。

Answer 3

可滾動表格最常見的技巧是創建表格的克隆並顯示第一個克隆的<thead>和第二個克隆的<tbody> 。 這樣做是為了確保兩個部分具有相同的結構和列寬。 下面使用這個思路+粘性定位：

 $(function() { $(".fixed_headers").each(function() { $(this).wrap("<div class='scrollable-table'></div>"); $(this).clone().insertBefore(this); }); });

 @import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css); .scrollable-table { overflow: auto; max-height: 250px; }.scrollable-table table:nth-child(1) { position: sticky; left: 0; top: 0; background-color: #fff; margin-bottom: 0; }.scrollable-table table:nth-child(1) tbody { visibility: collapse; }.scrollable-table table:nth-child(2) thead { visibility: collapse; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <p style="text-align: center;">Best viewed in full page</p> <div class="container"> <table class="table table-condensed table-bordered table-hover fixed_headers"> <thead> <tr> <th class="nb_custom_th">Store_Country</th> <th class="nb_custom_th">Brand</th> <th class="nb_custom_th">Product Description</th> <th class="nb_custom_th">12</th> <th class="nb_custom_th">df</th> <th class="nb_custom_th">trr</th> <th class="nb_custom_th">Tax onlatest periodofthe fiscal17</th> <th class="nb_custom_th">df1</th> <th class="nb_custom_th">121</th> <th class="nb_custom_th">4455tre4</th> <th class="nb_custom_th">4455tre41</th> <th class="nb_custom_th">4455tre42</th> <th class="nb_custom_th">4455tre43</th> <th class="nb_custom_th">4455tre431</th> <th class="nb_custom_th">4455tre433</th> <th class="nb_custom_th">4455tre434</th> <th class="nb_custom_th">4455tre435</th> <th class="nb_custom_th">4455tre436</th> <th class="nb_custom_th">4455tre437</th> <th class="nb_custom_th">4455tre438</th> <th class="nb_custom_th">4455tre439</th> <th class="nb_custom_th">4455tre4310</th> <th class="nb_custom_th">4455tre4311</th> <th class="nb_custom_th">4455tre4312</th> <th class="nb_custom_th">4455tre4313</th> <th class="nb_custom_th">4455tre4314</th> <th class="nb_custom_th">4455tre4315</th> <th class="nb_custom_th">4455tre4316</th> <th class="nb_custom_th">4455tre4317</th> <th class="nb_custom_th">4455tre43171</th> <th class="nb_custom_th">Tax on latest period of the fiscal15</th> <th class="nb_custom_th">Tax on latest period of the fiscal16</th> <th class="nb_custom_th">Taxon latest period ofthefiscal18</th> <th class="nb_custom_th">Taxon latest period ofthefiscal181</th> </tr> </thead> <tbody> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple iPad 4 16GB Wi-Fi + Cellular</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> </tr> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple iPad Air</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> </tr> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple iPad Mini</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> </tr> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple IPhone 4S 64GB</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> </tr> </tbody> </table> </div>