仅使用 CSS 创建带有粘性标题和列的 HTML 表格

Question

我有一个表格，我正在尝试在其中制作标题，并且其左侧的任意数量的列都是“粘性的”。就像在表格数据垂直滚动时一样，标题保持在顶部。如果有足够的列垂直滚动，数据和标题是垂直滚动的，但有些列会粘住。

这是一个带有粘性标题的可垂直和水平滚动的表格。

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;
}

但我不确定如何在包含粘性列的同时做到这一点。

Answer 1

你需要一些js来让它工作。

滚动条：

<button title="Up" onmousedown="upp();" onmouseup="upp(1);">Up</button>
<button title="Left" onmousedown="left();" 
        onmouseup="left(1);">&lt;&lt;</button>
<button title="Right" onmousedown="right();" 
        onmouseup="right(1);">&gt;&gt;</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 table plugin -> jtable