css实现固定table表格最后两列，其他滚动查看

要实现固定表格的最后两列，可以使用CSS中的position和transform属性，具体步骤如下：

1. 将表格放在一个容器div内，并设置容器div的宽度为表格的宽度加上要固定的最后两列的宽度。

2. 将表格的最后两列单独放在一个table中，并将这个table放在容器div的右侧，设置这个table的position属性为absolute，right属性为0。

3. 给容器div设置overflow属性为auto或scroll，这样就会出现滚动条。

4. 给右侧表格的tbody中的每一行tr设置transform属性为translateX(-100%)，这样就能将最后两列移动到表格外面，避免重叠。

CSS代码示例如下：

.table-container {
  width: 800px; /* 表格宽度 + 最后两列的宽度 */
  overflow: auto;
  position: relative;
}

table {
  width: 100%;
}

.right-column {
  position: absolute;
  right: 0;
  top: 0;
}

.right-column tbody tr {
  transform: translateX(-100%);
}

需要注意的是，这种方式只适用于固定的最后两列，如果要固定其他列，需要根据实际情况进行调整。

相关问题

css实现固定table表格

要实现固定表格，可以使用CSS中的position和overflow属性，具体步骤如下：

1. 给表格外层容器div设置固定高度和宽度，overflow属性设置为auto或scroll，这样就会出现滚动条。

2. 将表格放在容器div内，并设置表格的宽度为100%。

3. 给表格的thead和tbody分别设置position属性为sticky，top属性为0，这样表头就能固定在页面顶部。

4. 如果表格有左侧固定列，可以将左侧列单独放在一个table中，然后设置这个table的position属性为absolute，left属性为0，这样左侧列就能固定在页面左侧。

CSS代码示例如下：

.table-container {
  width: 500px;
  height: 300px;
  overflow: auto;
}

table {
  width: 100%;
}

thead th,
tbody td {
  position: sticky;
  top: 0;
}

.left-column {
  position: absolute;
  left: 0;
}

position: sticky 表格 固定两列不滚动

要在表格中固定两列并使其不滚动，您可以使用position: sticky属性和一些CSS样式。以下是一个示例：

HTML结构示例：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>固定列1</th>
        <th>固定列2</th>
        <th>其他列1</th>
        <th>其他列2</th>
        <!-- 其他表头列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容行 -->
    </tbody>
  </table>
</div>

CSS样式示例：

.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: max-content;
  table-layout: fixed;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  background-color: white;
}

th:nth-child(2),
td:nth-child(2) {
  position: sticky;
  left: 100px; /* 调整固定列的宽度 */
  background-color: white;
}

首先，将表格放在一个包含overflow-x: auto样式的容器中，这样当内容超出容器宽度时，可以出现水平滚动条。

然后，使用position: sticky和left属性来将第一列和第二列固定在左侧。您可以通过调整left值来控制固定列的宽度。

注意：这种方法在大多数现代浏览器中都能正常工作，但在某些旧版本的浏览器中可能不起作用。