第一列固定的 HTML 表格

Question

我在所有论坛中搜索了 3 天以找到解决方案，但不幸的是，没有找到。当我调整屏幕大小时并为其余部分制作滚动条时，我找不到如何固定 HTML 表格中的第一列(不是第一行):column2，column3，column4 ...仅使用 CSS 而没有 JavaScript或者 JQuery

Answer 1

可以使用 position: sticky css 属性轻松制作第一列或第一行。

.limited-area {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  overflow-x: auto;
  white-space:nowrap;
}

.col-fixed {
  position: sticky;
  left: 0px;
  background-color: red;
}

.col-number {
  min-width: 150px;
  text-align: center;
}

.col-text {
  min-width: 250px;
  text-align: left;
}

<div class="limited-area">
  <table>
    <thead>
      <tr>
        <th class="col-fixed">idx</th>
        <th class="col-number">id</th>
        <th class="col-text">type</th>
      </tr>
    </thead>
      <tbody>
        <tr>
          <td class="col-fixed">0</td>
          <td class="col-number">1</td>
          <td class="col-text">Some content here that may force the screen to be scrollable</td>
        </tr>
        <tr>
          <td class="col-fixed">1</td>
          <td class="col-number">77</td>
          <td class="col-text">Another content here that may force the screen to be scrollable</td>
        </tr>
        <tr>
          <td class="col-fixed">2</td>
          <td class="col-number">99</td>
          <td class="col-text">Small content</td>
        </tr>
        <tr>
          <td class="col-fixed">3</td>
          <td class="col-number">123</td>
          <td class="col-text">All the content</td>
        </tr>
    </tbody>
  </table>
</div>