CSS：冻结表头和第一列*，但仅限于某些轴*

Question

我有一个常见问题的变体，我会尽力解释它。您可能需要一些可视化。我有一个HTML表（实际上表中的表内有表格 - 我正在使用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的宽度