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

因此，而不是我在position:fixed中尝试使用relative ，它正在与您的拥有{{1 }}。

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

移除父div的th时，您可以同时看到水平和垂直滚动条，我在下面的小提琴中对此进行了评论。

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

Answer 2

Dunno，如果您可以/想要使用一个库，但是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>

固定的表格标题具有水平和垂直滚动体

3 个答案: