Cá nhân tôi cần một bàn với cả hai tiêu đề bên trái và hàng đầu có thể nhìn thấy mọi lúc.Lấy cảm hứng từ một số bài báo, tôi nghĩ rằng tôi có một giải pháp tốt mà bạn có thể thấy hữu ích.Phiên bản này không có vấn đề gói mà các bản hòa tấu khác có với các div nổi hoặc kích thước tự động/linh hoạt của các cột và hàng.
// Handler for scrolling events
function scrollFixedHeaderTable[] {
var outerPanel = $["#_outerPanel"];
var cloneLeft = $["#_cloneLeft"];
var cloneTop = $["#_cloneTop"];
cloneLeft.css[{ 'margin-top': -outerPanel.scrollTop[] }];
cloneTop.css[{ 'margin-left': -outerPanel.scrollLeft[] }];
}
function initFixedHeaderTable[] {
var outerPanel = $["#_outerPanel"];
var innerPanel = $["#_innerPanel"];
var clonePanel = $["#_clonePanel"];
var table = $["#_table"];
// We will clone the table 2 times: For the top rowq and the left column.
var cloneLeft = $["#_cloneLeft"];
var cloneTop = $["#_cloneTop"];
var cloneTop = $["#_cloneTopLeft"];
// Time to create the table clones
cloneLeft = table.clone[];
cloneTop = table.clone[];
cloneTopLeft = table.clone[];
cloneLeft.attr['id', '_cloneLeft'];
cloneTop.attr['id', '_cloneTop'];
cloneTopLeft.attr['id', '_cloneTopLeft'];
cloneLeft.css[{
position: 'fixed',
'pointer-events': 'none',
top: outerPanel.offset[].top,
'z-index': 1 // keep lower than top-left below
}];
cloneTop.css[{
position: 'fixed',
'pointer-events': 'none',
top: outerPanel.offset[].top,
'z-index': 1 // keep lower than top-left below
}];
cloneTopLeft.css[{
position: 'fixed',
'pointer-events': 'none',
top: outerPanel.offset[].top,
'z-index': 2 // higher z-index than the left and top to make the top-left header cell logical
}];
// Add the controls to the control-tree
clonePanel.append[cloneLeft];
clonePanel.append[cloneTop];
clonePanel.append[cloneTopLeft];
// Keep all hidden: We will make the individual header cells visible in a moment
cloneLeft.css[{ visibility: 'hidden' }];
cloneTop.css[{ visibility: 'hidden' }];
cloneTopLeft.css[{ visibility: 'hidden' }];
// Make the lef column header cells visible in the left clone
$["#_cloneLeft td._hdr.__row"].css[{
visibility: 'visible',
}];
// Make the top row header cells visible in the top clone
$["#_cloneTop td._hdr.__col"].css[{
visibility: 'visible',
}];
// Make the top-left cell visible in the top-left clone
$["#_cloneTopLeft td._hdr.__col.__row"].css[{
visibility: 'visible',
}];
// Clipping. First get the inner width/height by measuring it [normal innerWidth did not work for me]
var helperDiv = $[''];
outerPanel.append[helperDiv];
var innerWidth = helperDiv.width[];
var innerHeight = helperDiv.height[];
helperDiv.remove[]; // because we dont need it anymore, do we?
// Make sure all the panels are clipped, or the clones will extend beyond them
outerPanel.css[{ clip: 'rect[0px,' + String[outerPanel.width[]] + 'px,' + String[outerPanel.height[]] + 'px,0px]' }];
// Clone panel clipping to prevent the clones from covering the outerPanel's scrollbars [this is why we use a separate div for this]
clonePanel.css[{ clip: 'rect[0px,' + String[innerWidth] + 'px,' + String[innerHeight] + 'px,0px]' }];
// Subscribe the scrolling of the outer panel to our own handler function to move the clones as needed.
$["#_outerPanel"].scroll[scrollFixedHeaderTable];
}
$[document].ready[function [] {
initFixedHeaderTable[];
}];
* {
clip: rect font-family: Arial;
font-size: 16px;
margin: 0;
padding: 0;
}
#_outerPanel {
margin: 0px;
padding: 0px;
position: absolute;
left: 50px;
top: 50px;
right: 50px;
bottom: 50px;
overflow: auto;
z-index: 1000;
}
#_innerPanel {
overflow: visible;
position: absolute;
}
#_clonePanel {
overflow: visible;
position: fixed;
}
table {
}
td {
white-space: nowrap;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 2px 2px 2px 2px;
}
td._hdr {
color: Blue;
font-weight: bold;
}
td._hdr.__row {
background-color: #eee;
border-left: 1px solid #000;
}
td._hdr.__col {
background-color: #ddd;
border-top: 1px solid #000;
}
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
TOP HEADER
MY HEADER COLUMN:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
MY HEADER COLUMN:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.