CSS 固定列和表头的HTML表格

在本文中，我们将介绍如何使用CSS来创建一个带有固定列和表头的HTML表格。固定列和表头的表格在数据较多时非常实用，可以让用户在滚动表格时保持列和表头的可见性。我们将使用CSS中的position和overflow属性来实现这一效果。

要创建一个带有固定列和表头的HTML表格，我们首先需要将表格的每个单元格放置在自己的容器中。这样，我们就可以通过设置容器的宽度来控制每个单元格的宽度，并保持固定列和表头的位置。在以下示例中，我们将使用一个包含20个单元格的简单表格来说明。

<table class="fixed-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>国籍</th>
      <!-- 这里是其他表头列 -->
      <th>其他列</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>中国</td>
      <!-- 这里是其他数据列 -->
      <td>其他数据</td>
    </tr>
    <!-- 其他行 -->
  </tbody>
</table>

阅读更多：CSS 教程

CSS样式

我们需要使用以下CSS样式来实现固定列和表头的效果。

.fixed-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed-table thead {
  position: sticky;
  top: 0;
  background-color: #f2f2f2;
}

.fixed-table th {
  position: sticky;
  left: 0;
  background-color: #f2f2f2;
}

.fixed-table th,
.fixed-table td {
  padding: 8px;
  border: 1px solid #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-table td:first-child,
.fixed-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
}

在上面的CSS样式中，我们首先将表格的宽度设置为100%以适应父容器的大小。然后，我们使用table-layout: fixed属性来固定表格的宽度，使得每个单元格的宽度可以通过容器的宽度来控制。

接下来，我们使用position: sticky属性将表头和第一列的单元格固定在容器的顶部和左侧。通过设置top: 0，我们可以将表头固定在容器的顶部。同样地，通过设置left: 0，我们可以将第一列的单元格固定在容器的左侧。这样，当用户滚动表格时，固定的列和表头将保持可见。

我们还为表头和单元格设置了一些样式，如背景颜色和边框。同时，我们使用overflow: hidden和text-overflow: ellipsis属性来隐藏文本溢出的内容，并在单元格宽度不足时显示省略号。

示例演示

现在，让我们来看看一个完整的示例演示。在以下示例中，我们使用10个固定列和100个随机生成的数据行来创建一个带有固定列和表头的HTML表格。请注意，在这个示例中，我们会使用一个包含大量数据的表格，以便更好地演示固定列和表头的效果。

<table class="fixed-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>国籍</th>
      <!-- 其他表头列 -->
      <th>其他列</th>
      <!-- 固定表头列 -->
      <th>固定表头1</th>
      <th>固定表头2</th>
      <th>固定表头3</th>
      <th>固定表头4</th>
      <th>固定表头5</th>
    </tr>
  </thead>
  <tbody>
    <!-- 随机生成的数据 -->
  </tbody>
</table>

<script>
  const tbody = document.querySelector('.fixed-table tbody');
  const fixedColumn = document.querySelector('.fixed-column tbody');

  // 生成随机数据
  function generateRandomData() {
    const data = [];

    for (let i = 0; i < 100; i++) {
      const rowData = [];

      for (let j = 0; j < 10; j++) {
        const randomValue = Math.random().toString(36).substring(7);
        rowData.push(randomValue);
      }

      data.push(rowData);
    }

    return data;
  }

  // 渲染数据
  function renderData(data) {
    data.forEach(rowData => {
      const tr = document.createElement('tr');

      rowData.forEach(value => {
        const td = document.createElement('td');
        td.innerText = value;
        tr.appendChild(td);
      });

      tbody.appendChild(tr);
    });
  }

  // 渲染固定列
  function renderFixedColumn() {
    const rows = tbody.querySelectorAll('tr');

    rows.forEach(row => {
      const td = row.querySelector(':nth-child(1)').cloneNode(true);
      const fixedRow = document.createElement('tr');
      fixedRow.appendChild(td);
      fixedColumn.appendChild(fixedRow);
    });
  }

  const randomData = generateRandomData();
  renderData(randomData);
  renderFixedColumn();
</script>

在这个示例中，我们使用JavaScript动态地生成了一些随机数据，并将它们渲染到表格中。同时，我们使用JavaScript将第一列的固定列单独渲染到一个包含在.fixed-column类中的tbody中。通过这种方式，我们可以将固定列与其他列分开渲染，并通过CSS将它们固定在表格的左侧。