我有一个表格,我试图在其中制作标题,并且在其左侧“粘性”的任意数量的列。粘性,当表格数据垂直滚动时,标题保持在顶部。如果有足够的列可以垂直滚动,则数据和标题可以垂直滚动,但有些列会保持不变。
这是一个可垂直和水平滚动并带有粘性标题的表格。
http://jsfiddle.net/7b29Lkwy/5/
重要的部分是
.sticky-table {
width: 100%;
height: 100%;
overflow-x: scroll;
}
.scroll {
float: left; /* Makes with total content width */
min-width: 100%; /* In case there isn't enough columns */
height: calc(100% - 35px); /* Assuming we know head height */
overflow: scroll;
}
但我不确定如何在包含粘性列的同时做到这一点。
最佳答案
你需要一些 js 来让它工作。
滚动条:
<button title="Up" onmousedown="upp();" onmouseup="upp(1);">Up</button>
<button title="Left" onmousedown="left();"
onmouseup="left(1);"><<</button>
<button title="Right" onmousedown="right();"
onmouseup="right(1);">>></button>
<button title="Down" onmousedown="down();" onmouseup="down(1);">Dn</button>
将 t1 替换为您的表 ID
if(!myTable){myTable=document.getElementById("t1");
当然还有工作 js
var myRow=1;
var myCol=1;
var myTable;
var noRows;
var myCells,ID;
function setUp(){
if(!myTable){myTable=document.getElementById("t1");}
myCells = myTable.rows[0].cells.length;
noRows=myTable.rows.length;
for( var x = 0; x < myTable.rows[0].cells.length; x++ ) {
colWdth=myTable.rows[0].cells[x].offsetWidth;
myTable.rows[0].cells[x].setAttribute("width",colWdth-4);
}
}
function right(up){
if(up){window.clearTimeout(ID);return;}
if(!myTable){setUp();}
if(myCol<(myCells)){
for( var x = 0; x < noRows; x++ ) {
myTable.rows[x].cells[myCol].style.display="";
}
if(myCol >1){myCol--;}
ID = window.setTimeout('right()',100);
}
}
function left(up){
if(up){window.clearTimeout(ID);return;}
if(!myTable){setUp();}
if(myCol<(myCells-1)){
for( var x = 0; x < noRows; x++ ) {
myTable.rows[x].cells[myCol].style.display="none";
}
myCol++
ID = window.setTimeout('left()',100);
}
}
function down(up){
if(up){window.clearTimeout(ID);return;}
if(!myTable){setUp();}
if(myRow<(noRows-1)){
myTable.rows[myRow].style.display="none";
myRow++ ;
ID = window.setTimeout('down()',100);
}
}
function upp(up){
if(up){window.clearTimeout(ID);return;}
if(!myTable){setUp();}
if(myRow<=noRows){
myTable.rows[myRow].style.display="";
if(myRow >1){myRow--;}
ID = window.setTimeout('upp()',100);
}
}
详细解释请看这里 http://www.codeproject.com/Articles/20017/Freeze-Panes-like-Excel
更新: 问题的解决方案是使用这个 jquery 表插件 -> jtable
关于css - 仅使用 CSS 创建带有粘性标题和列的 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33637990/