CSS：冻结表格标题和第一列，*但仅在某些轴上*

Question

我对一个常见问题有不同的看法，我会尽力解释它。这可能需要您进行一些可视化。我有一个 HTML 表格（实际上在表格中的 div 中的表格中有表格——我正在使用 JSGantt 插件）。我希望仅在我在 y 轴上向下滚动时冻结表头，但如果我需要向右滚动以查看更多数据，我希望它向右滚动。

同时，当我向下滚动时（标题行保持不变），我希望表格的第一列与我一起向下滚动。但是当我向右滚动时，我希望第一列保持不变（但正如我上面提到的，标题行与我一起滚动）。所以基本上我只在 x 轴上冻结了第一列，只在 y 轴上冻结了标题行。

我现在就到此为止。如果有人需要更多说明，我可以尝试解释。我已经尝试了多种方法，但我相信如果没有一些严肃的 Javascript，这可能是不可能的。顺便说一下，表格包含在具有设定尺寸的外部 div 中，因此我需要滚动数据。

您能提供的任何帮助将不胜感激。

Answer 1

这种类型的布局将在您的道路上为您提供帮助。请注意，单元格的大小会有很多格式，以使它们匹配

<div id="TableHeaderDiv">
    <table id="TableHeader">
        <thead>
            <tr>
                <th style="width:100px"> Column1 </th>
                <th style="width:100px"> Column2 </th>
                <th style="width:100px"> Column3 </th>
            </tr>
        <thead>
    </table>
</div>
<div id "TableBodyMainDiv" style="overflow-y:auto">
  <div id="TableBodyLeftDiv" style="float:left">
     <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>

  </div>
  <div id="TableBodyDiv" style="float:left; overflow-x: auto">
    <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>
  </div>
</div>

可能想要使用 CSS 类或 Javascript 设置 tds 的宽度样式