如何解决修复了可调整大小的 HTML 表上的标题,包括自动水平滚动溢出
我使用以下示例作为指南构建了一个 html 表,但是我一直无法弄清楚如何使头部固定,以便在用户滚动时保持可见:
https://jsfiddle.net/thatOneGuy/u5bvwh8m/16/
我尝试过使用 CSS 来控制
.resizable{overflow-y: auto; position: sticky; height: 750px;}
table thead tr{
display:block;
}
table th,table td{
width:100px;//fixed width
}
table tbody{
display:block;
height:200px;
overflow:auto;//set tbody to auto
}
非常感谢任何帮助。
解决方法
试试这个
{
"amount": 0.2,"direction": "IN","fromNetwork": "ETH","source":"","symbol":"ETH","toAddress":"my wallet address","toAddressLabel":"","toNetwork":"BSC","walletAddress": "my wallet address","walletNetwork": "ETH"
}
并从 thead th{
position: sticky !important;
top: 0;
background-color: white;
}
标签中删除 resizable
类并将其放入 table
和 thead
标签
tbody
<table id="tableId" >
<thead class="resizable">
...
<tbody class="resizable">
//var tables = document.getElementsByClassName('flexiCol');
var tables = document.getElementsByClassName('resizable');
for (var i = 0; i < tables.length; i++) {
resizableGrid(tables[i]);
}
function resizableGrid(table) {
var row = table.getElementsByTagName('tr')[0],cols = row ? row.children : undefined;
if (!cols) return;
table.style.overflow = 'hidden';
var tableHeight = table.offsetHeight;
for (var i = 0; i < cols.length; i++) {
var div = createDiv(tableHeight);
cols[i].appendChild(div);
cols[i].style.position = 'relative';
setListeners(div);
}
function setListeners(div) {
var pageX,curCol,nxtCol,curColWidth,nxtColWidth,tableWidth;
div.addEventListener('mousedown',function(e) {
tableWidth = document.getElementById('tableId').offsetWidth;
curCol = e.target.parentElement;
nxtCol = curCol.nextElementSibling;
pageX = e.pageX;
var padding = paddingDiff(curCol);
curColWidth = curCol.offsetWidth - padding;
// if (nxtCol)
//nxtColWidth = nxtCol.offsetWidth - padding;
});
div.addEventListener('mouseover',function(e) {
e.target.style.borderRight = '2px solid #0000ff';
})
div.addEventListener('mouseout',function(e) {
e.target.style.borderRight = '';
})
document.addEventListener('mousemove',function(e) {
if (curCol) {
var diffX = e.pageX - pageX;
// if (nxtCol)
//nxtCol.style.width = (nxtColWidth - (diffX)) + 'px';
curCol.style.width = (curColWidth + diffX) + 'px';
console.log(curCol.style.width)
console.log(tableWidth)
document.getElementById('tableId').style.width = tableWidth + diffX + "px"
}
});
document.addEventListener('mouseup',function(e) {
curCol = undefined;
nxtCol = undefined;
pageX = undefined;
nxtColWidth = undefined;
curColWidth = undefined
});
}
function createDiv(height) {
var div = document.createElement('div');
div.style.top = 0;
div.style.right = 0;
div.style.width = '5px';
div.style.position = 'absolute';
div.style.cursor = 'col-resize';
div.style.userSelect = 'none';
div.style.height = height + 'px';
return div;
}
function paddingDiff(col) {
if (getStyleVal(col,'box-sizing') == 'border-box') {
return 0;
}
var padLeft = getStyleVal(col,'padding-left');
var padRight = getStyleVal(col,'padding-right');
return (parseInt(padLeft) + parseInt(padRight));
}
function getStyleVal(elm,css) {
return (window.getComputedStyle(elm,null).getPropertyValue(css))
}
};
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
td,th {
padding: 5px 15px;
text-align: left;
}
table,th,td {
border: 1px solid #000;
}
thead th {
position: sticky !important;
top: 0;
background-color: white;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。