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

下面我将详细讲解如何使用CSS实现表格首行首列固定和自适应窗口，并提供两个示例说明。

下面我将详细讲解如何使用CSS实现表格首行首列固定和自适应窗口，并提供两个示例说明。

实现表格首行首列固定

要实现表格的首行和首列固定，可以使用 position 和 z-index 属性来实现。

首先，通过 CSS 将表格的第一行和第一列单独设置样式，例如：

table tr:first-child {
  position: relative;
}

table tr:first-child td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: white;
}

其中，position 属性设置为 sticky 表示这个单元格固定在视图的顶部或左侧，z-index 属性设置为 1 表示这个单元格在其他单元格的前面进行渲染，background 属性设置为 white 是为了覆盖住其他单元格的背景色。

接着，为表格内的所有单元格设置自适应宽度和高度，例如：

table td {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
}

最终，表格的样式代码如下：

table {
  width: 80%;
  height: 300px;
  border-collapse: collapse;
  margin: 0 auto;
}

table tr:first-child {
  position: relative;
}

table tr:first-child td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: white;
}

table td {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
}

实现表格自适应窗口

要实现表格的自适应窗口，可以使用 CSS3 的 calc 函数和 vw 和 vh 单位来实现。

首先，通过 CSS 将表格的宽度设置为视口宽度的百分比，例如：

table {
  width: 80vw;
  height: 300px;
  border-collapse: collapse;
  margin: 0 auto;
}

其中，vw 表示视口宽度的百分比。

接着，为表格内的所有单元格设置自适应宽度和高度，例如：

table td {
  width: calc(100% / 5);
  height: calc(100% / 3);
  border: 1px solid gray;
}

其中，calc 函数用于计算表格单元格的宽度和高度，计算公式为 100% / (行数或列数)，例如，如果表格有 5 列和 3 行，那么每个单元格的宽度和高度分别为 20% 和 33.3%。

最终，表格的样式代码如下：

table {
  width: 80vw;
  height: 300px;
  border-collapse: collapse;
  margin: 0 auto;
}

table td {
  width: calc(100% / 5);
  height: calc(100% / 3);
  border: 1px solid gray;
}

示例说明

假设我们有一个人口统计表格，表格共有 6 列和 10 行。其中，表格的第一行和第一列为表头，需要固定显示。而且该表格需要自适应窗口大小。

在实现固定表头和表格自适应窗口的过程中，我们可以使用上面提到的两个方法来实现。对于固定表头，我们需要为表格的第一行和第一列单独设置样式，使用 position: sticky; 属性将固定在视图的顶部和左侧。而对于自适应窗口，我们使用 calc 函数和 vw 和 vh 单位来计算表格单元格的宽度和高度，使其能够根据视口的大小进行适应。

下面是基于上述方法实现的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>人口统计表格</title>
  <style>
    table {
      width: 80vw;
      height: 300px;
      border-collapse: collapse;
      margin: 0 auto;
    }

    table tr:first-child {
      position: relative;
    }

    table tr:first-child td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
      background: white;
    }

    table td {
      width: calc(100% / 6);
      height: calc(100% / 10);
      border: 1px solid gray;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>年度</td>
      <td>男性人口</td>
      <td>女性人口</td>
      <td>人均预期寿命</td>
      <td>出生率</td>
      <td>死亡率</td>
    </tr>
    <tr>
      <td>2000</td>
      <td>5,456,789</td>
      <td>5,678,901</td>
      <td>70</td>
      <td>2.1%</td>
      <td>0.7%</td>
    </tr>
    <!-- 省略剩余行 -->
  </table>
</body>
</html>

以上就是实现表格首行首列固定和自适应窗口的完整攻略，希望可以对你有所帮助。

实现表格首行首列固定

实现表格自适应窗口

示例说明

基础教程推荐