修复了具有水平AND垂直滚动体的表头

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使用relativeinth，它正在与您的父母合作，div其中有min-height:100px.

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

方法：2

在删除min-height我在下面的小提琴中评论的父 div 时，您可以一次看到水平和垂直滚动条。

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