Question

我有一个表格，我正在尝试制作标题，左边的任意数量的列“粘滞”。由于表格数据是垂直滚动的，因此标题会粘在顶部。如果有足够的列可以垂直滚动，则数据和标题可以垂直滚动，但有些列会粘住。

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

重要的部分是

.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

你需要一些j来使它发挥作用。

滚动条：

<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表插件 - ＆gt; jtable

仅使用CSS

1 个答案: