Question

感谢阅读。我在div容器（div0）中有一个表。该表填充了数据并动态生成。因此表的高度和宽度不固定。外部div可以垂直和水平滚动以查看整个表。现在的要求是我需要水平地修复表格的第一列的poistion，即在滚动水平滚动条时，第一列应该是固定的，其余应该是scoll。关于如何实现这一点，只需要一些指示？

我正在考虑将div（div1）中的第一列内容（水平不可滚动）与其他div（div2）中的其他可滚动内容分开，这两个内容都放在一行中有一行和两个tds。现在我用这种方法得到2个probs，1当我向右滚动时div 2的滚动条进入div0（想到使用jquery scrollbatr但是如何将它放在div2之外）。其次是两个div之间的对齐。

Answer 1

如果我明白你在寻找什么;不久前我做了类似的事情。

Html可能看起来像这样。

<table border="1" id="header">
    <tr>
       <th></th>
       <th></th>
    </tr>
 </table>
 <div id="tableData">
   <table border="1" id="table">
       <td></td>
       <td></td>
   </table>
 </div>

CSS

#tableData {
   overflow: scroll;
   overflow-x:hidden;
   height: 190px;
   border-bottom: 1px solid #B5B3B3;
   width: 940px;
}

JavaScript以确保标头与表格数据对齐

$("#tableData").height(190);
$("#tableData").width(940);
for(var i=1;i<8;i++){
    if($("#header th:nth-child("+i.toString()+")").width() >= $("#table td:nth-child("+i.toString()+")").width())
        $("#table td:nth-child("+i.toString()+")").width($("#header th:nth-child("+i.toString()+")").width());
    else
        $("#header th:nth-child("+i.toString()+")").width($("#table td:nth-child("+i.toString()+")").width());
}
$("#tableData").width($("#table").width()+20);
if($("#table").height() <= $("#tableData").height()) 
   $("#tableData").height($("#table").height());

您可能需要进行一些调整，但这是一个解决方案。 i变量需要覆盖每一列，在我的例子中，它适用于7列。

使表格的第一列固定在水平滚动上

1 个答案: