CSS实现表格首行首列固定和自适应窗口的实例代码

1. 介绍

在前端开发中，经常会遇到需要实现固定表头或固定列的需求。本文将介绍如何使用CSS实现表格首行首列固定，并使表格可以自适应窗口的实例代码。

2. 实现原理

要实现表格首行首列固定，我们需要使用CSS中的position属性和z-index属性，对表格进行定位和层级控制。

2.1. 固定表头

要固定表头，首先需要将表头部分单独提取出来，并设置其position属性为fixed，并设置top和left属性为0。

table thead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

接着，需要使表格主体部分在表头下方显示，可以通过设置margin-top属性为表头的高度来实现。

table tbody {
  margin-top: 表头的高度;
}

这样就可以实现固定表头的效果。

2.2. 固定表列

要固定表列，首先需要将表格中要固定的列单独提取出来，并设置其position属性为fixed，并设置left属性为0。

table tr td:first-child {
  position: fixed;
  left: 0;
  z-index: 2;
}

同样地，为了使表格主体部分不被固定列遮挡，可以通过设置margin-left属性为固定列的宽度来实现。

table td {
  margin-left: 固定列的宽度;
}

这样就可以实现固定表列的效果。

2.3. 自适应窗口

要使表格可以自适应窗口大小，需要设置表格的宽度属性为100%。

table {
  width: 100%;
  table-layout: fixed;
}

其中，table-layout属性可以让表格根据内容自动调整列宽。

3. 实例代码

下面是一个包含固定表头和固定表列，并且可以自适应窗口大小的表格的完整实例代码：

table {
  width: 100%;
  table-layout: fixed;
}
table thead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
table tbody {
  margin-top: 表头的高度;
}
table tr td:first-child {
  position: fixed;
  left: 0;
  z-index: 2;
}
table td {
  margin-left: 固定列的宽度;
}

4. 总结

本文介绍了如何使用CSS实现表格首行首列固定和自适应窗口大小的实例代码。通过使用position属性和z-index属性，我们可以对表头和固定列进行定位和层级控制，从而实现固定效果。同时，通过设置表格的宽度属性为100%和table-layout属性为fixed，我们可以使表格自适应窗口大小，并根据内容调整列宽。

使用这些技巧，我们可以更灵活地处理表格的显示和布局，提升用户体验。