javascript - 具有水平和垂直滚动主体的固定表头
问题描述
目标:
- 表头和表体的列宽应相同。
- 表头固定在垂直滚动上。
- 要在水平滚动时移动的表头。
- 要在 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() });
}
});
解决方案
您正在克隆表以修复表头,更好的是您可以直接修复原始表的表头,结果相同。
改变相对于视口的宽度的元素position:fixed
,导致宽度在滚动时发生变化,您可以在此处查看https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19
方法:1
而不是
position:fixed
使用relative
inth
,它正在与您的父母一起div
使用min-height:100px
.
方法:2
min-height
在删除我在下面的小提琴中评论过的父 div时,您可以一次看到水平和垂直滚动条。
推荐阅读
- javascript - p5.js 库的所有功能由于某种原因无法正常工作
- batch-file - CMD Line - 帮助为我的文件名添加时间
- php - 我的 HTML 表单无法使用 PHP 邮件程序发送没有附件的电子邮件
- function - 函数内部 for 循环的交互状态
- android - 尝试使用 onclicklistener 时,我不断收到“修饰符覆盖不适用于本地功能”
- video - FFmpeg subtitle filter set start time
- powerbi - tableau/PowerBI 何时将仪表板选项卡/页面加载到内存中?
- javascript - 当它存在于 DOM 中时,querySelector 返回 'Failed to execute div is not a valid selector'
- discord - 多个前缀 Discord.js v12
- amazon-web-services - AWS S3 对象创建事件给了我 _TRANSFER_IN_PROGRESS_xxx 文件名