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

Question

感谢阅读。我在 div 容器 (div0) 中有一个表。该表填充有数据并且是动态生成的。所以表格的高度和宽度是不固定的。外层的div可以垂直和水平滚动来查看整个表格。现在的要求是我需要水平固定表格第一列的位置，即在滚动水平滚动条时，第一列应该是固定的，其余的应该是 scoll。只需要一些关于如何实现这一目标的指示？

我正在考虑将第一列内容(不可水平滚动)分隔在一个 div(div1) 中，将其他可滚动内容分隔在单独的 div(div2) 中，它们都放在一行和 2 个 tds 的表中。现在我用这种方法得到了 2 个问题，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 列。