固定的表头带有水平和垂直滚动体 [英] Fixed table header with horizontal AND vertical scrolling body

问题描述

目标：

• 表标题和表主体的列宽应相同。


• 表头将在垂直滚动上固定。


• 表头将在水平滚动上移动。


• 头将被固定

问题语句：

• 表格标头在垂直滚动中未固定。


• 标头显示在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总长度
 var cc = 0; // colspan计数
 
 $ 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]））; 
} 
}）； 
 
函数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）; 
 
 
函数reLeft（）{
 $ tableNew.css（{left：$ table.offset（）。left-$ window.scrollLeft（）}）; 
} 
}）； 
  

解决方案

您正在为修复标题克隆表，更好可以直接修复原始表的标题，结果相同。

具有 position：fixed 的元素会更改宽度关于视口，结果宽度在滚动时会发生变化，您可以在此处检查 https://jsfiddle.net / chourasiapawankumar / vg7q3tyc / 19

方法：1

代替位置：固定在中使用相对 ，并且它与您的父 div 一起工作，该父<< c $ c>最小高度：100px 。

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

批准ach：2

删除 min时，您可以同时看到水平和垂直滚动条高度

，我在下面的小提琴中对此进行了评论。

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

Objectives:

• Column width of table header and table body should be same.
• Table header to be fixed on vertical scroll.
• Table header to be moved on horizontal scroll.
• Header to be displayed inside scroll-able division of HTML.

Problem statements:

• Table header does not get fixed on vertical scroll.
• Header displayed out of scroll-able division of HTML(When header position is fixed).

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:

Fiddle01: Solution works good as a separate module. JSFiddle01

Fiddle02: Solution does not work when its integrated with other divs. 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

Approach:1

instead of position:fixed use relative in th and it is working with your parent div which has min-height:100px.

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

Approach: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.

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

这篇关于固定的表头带有水平和垂直滚动体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！