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;
}

相关问题

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%);
}

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

uni-table表格固定表头

要实现 uni-table 表格固定表头的效果，你可以按照以下步骤进行操作：

1. 在需要固定表头的 uni-table 组件上加上 `height` 属性，设置表格的高度，如 `height: 400px;`。

2. 使用 CSS 将表格头部的 `thead` 元素设置为固定定位，并设置 `top` 属性为 0，如下所示：

.uni-table-wrap thead {
  position: sticky;
  top: 0;
}

3. 为了让固定的表头不会遮挡表格内容，在表格上方添加一个占位元素，高度与表头相同，如下所示：

<div style="height: 60px;"></div>
<uni-table :data="tableData" height="400"></uni-table>

其中 `height` 属性的值应该与 `div` 元素的高度相同。

这样就可以实现 uni-table 表格固定表头的效果了。