实现HTML表格双向滚动的CSS技巧

在网页设计中，处理大量数据时，表格是不可或缺的工具。为了提升用户体验，实现表格的纵向和横向滚动功能至关重要。以下是一些使用CSS实现此目标的技巧：

1. 固定表头:

.table-container {
  width: 500px; /* 设置容器宽度 */
  overflow-x: auto; /* 允许横向滚动 */
}

table {
  width: 1000px; /* 设置表格宽度 */
  table-layout: fixed; /* 固定表格布局 */
}

thead th {
  position: sticky; /* 固定表头 */
  top: 0;
  background-color: #f0f0f0; /* 设置表头背景色 */
}

2. 固定首列:

.table-container {
  height: 300px; /* 设置容器高度 */
  overflow-y: auto; /* 允许纵向滚动 */
}

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

3. 结合纵向和横向滚动:

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

table {
  width: 1000px;
  table-layout: fixed;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
}

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

通过以上代码示例，您可以灵活地控制表格的滚动行为，使其更易于浏览和操作。