[英]Fixed table header with horizontal AND vertical scrolling body
Objectives :目标:
Problem statements:问题陈述:
I have seen many posts, but could not find the solution to this particular problem statement.我看过很多帖子,但找不到这个特定问题陈述的解决方案。
I have created two JSFiddles to demonstrate the problem statements:我创建了两个 JSFiddles 来演示问题陈述:
Fiddle01: Solution works good as a separate module. Fiddle01:解决方案作为一个单独的模块效果很好。 JSFiddle01 JSFiddle01
Fiddle02: Solution does not work when its integrated with other divs. Fiddle02:解决方案在与其他 div 集成时不起作用。 JSFiddle02 JSFiddle02
Any help would be very much appreciated.任何帮助将不胜感激。
$(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() });
}
});
You are cloning the table for fix header, better you can direct fix the header of original table which will results the same.您正在克隆表以修复表头,更好的是您可以直接修复原始表的表头,结果相同。
Element with position:fixed
changes the width with respect to viewport, which results width gets change on scrolling as you can check here https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19具有position:fixed
更改相对于视口的宽度,这导致宽度在滚动时发生变化,您可以在此处查看https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19
Approach:1方法:1
instead of
position:fixed
userelative
inth
and it is working with your parentdiv
which hasmin-height:100px
.而不是position:fixed
在th
中使用relative
并且它正在与具有min-height:100px
的父div
一起工作。https://jsfiddle.net/chourasiapawankumar/krw0qpbL/62/ https://jsfiddle.net/chorasiapawankumar/krw0qpbL/62/
Approach:2方法:2
You can see both horizontal and vertical scroll bar at a time on removing
min-height
of parent div which I have commented in the below fiddle.在删除我在下面的小提琴中评论过的父 div 的min-height
时,您可以同时看到水平和垂直滚动条。https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/33/ https://jsfiddle.net/chorasiapawankumar/vg7q3tyc/33/
The most common trick for scrollable tables is to create a clone of the table and display the <thead>
from first clone and <tbody>
from the second.可滚动表格最常见的技巧是创建表格的克隆并显示第一个克隆的<thead>
和第二个克隆的<tbody>
。 This is done to ensure that both sections have identical structure and column widths.这样做是为了确保两个部分具有相同的结构和列宽。 The following uses this idea + sticky positioning:下面使用这个思路+粘性定位:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.