咨询：可水平滚动超长表格内实现无水平滚动固定行的可行性

当然可以做到！要让超长表格里某一行不需要跟着水平滚动，最简洁可靠的方案是用CSS的position: sticky属性，完全不需要复杂的JavaScript。

核心思路 #

position: sticky元素会在滚动到设定位置时“粘”住，我们可以给目标行的每个单元格设置left: 0，让它们始终固定在容器左侧，不会随水平滚动移动。需要注意的是，直接给<tr>设置sticky在部分浏览器兼容性不佳，所以更稳妥的方式是给该行的每个<td>单独设置样式。

完整代码示例 #

<div class="container" style="width:500px;height:300px;overflow:auto;position:relative;">
  <table style="width:1500px;border-collapse: collapse;">
    <!-- 固定行 -->
    <tr>
      <td style="position: sticky; left: 0; background: #fff; border: 1px solid #ddd;">固定列1</td>
      <td style="position: sticky; left: 0; background: #fff; border: 1px solid #ddd;">固定列2</td>
      <td style="position: sticky; left: 0; background: #fff; border: 1px solid #ddd;">固定列3</td>
      <td style="position: sticky; left: 0; background: #fff; border: 1px solid #ddd;">固定列4</td>
      <td style="position: sticky; left: 0; background: #fff; border: 1px solid #ddd;">固定列5</td>
      <td style="position: sticky; left: 0; background: #fff; border: 1px solid #ddd;">固定列6</td>
      <td style="position: sticky; left: 0; background: #fff; border: 1px solid #ddd;">固定列7</td>
    </tr>
    <!-- 普通滚动行 -->
    <tr>
      <td style="border: 1px solid #ddd;">1</td>
      <td style="border: 1px solid #ddd;">2</td>
      <td style="border: 1px solid #ddd;">3</td>
      <td style="border: 1px solid #ddd;">4</td>
      <td style="border: 1px solid #ddd;">5</td>
      <td style="border: 1px solid #ddd;">6</td>
      <td style="border: 1px solid #ddd;">7</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd;">A</td>
      <td style="border: 1px solid #ddd;">B</td>
      <td style="border: 1px solid #ddd;">C</td>
      <td style="border: 1px solid #ddd;">D</td>
      <td style="border: 1px solid #ddd;">E</td>
      <td style="border: 1px solid #ddd;">F</td>
      <td style="border: 1px solid #ddd;">G</td>
    </tr>
    <!-- 可添加更多行测试滚动效果 -->
  </table>
</div>

关键细节说明 #

• 背景色设置：一定要给固定单元格加上背景色（比如background: #fff），否则滚动时后面的单元格内容会透过固定行显示出来，影响视觉效果。
• 边框一致性：如果表格有边框，记得给固定单元格也加上相同的边框样式，保持整体视觉统一。
• 兼容性：position: sticky目前在所有现代浏览器（Chrome、Firefox、Edge、Safari）都稳定支持，无需额外兼容处理。

这样调整后，当你水平滚动容器时，目标行的所有单元格都会固定在左侧，不会跟着滚动，完美满足你的需求！

内容的提问来源于stack exchange，提问作者FLash