如何使HTML表格中的前五行固定不动并且只固定左侧的五列？

在HTML表格中，通常通过CSS来实现列或行的冻结。为了使前五行（包括第一行表头）固定不动，并仅固定左侧的五列，你可以这样做：

1. 首先，给你的表格添加`<table>`标签，并设置CSS样式属性：

<style>
table {
  position: relative;
}

thead {
  /* 使表头固定 */
  position: sticky;
  top: 0;
  background-color: #f5f5f5; /* 表头背景色可自定义 */
}

thead th {
  /* 只固定左边五列 */
  width: calc(100% / 5); /* 或者直接设定每个单元格宽度 */
  white-space: nowrap; /* 防止文字换行 */
}

/* 如果你想让除头部外的内容滚动，可以对tbody部分设置 */
tbody {
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
</style>

<table>
  <thead>
    <tr>
      <!-- 你的表头列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 表体内容 -->
  </tbody>
</table>

相关问题

table 固定左侧5列

在网页设计或CSS布局中，如果你想要创建一个表格，其中左侧固定有五列不动，你可以使用CSS的`display: flex`或者`grid`布局技术配合媒体查询（media query）来实现。这里是一个基本的例子：

<style>
  .fixed-table {
    display: flex;
    justify-content: space-between; /* 这使得剩下的列均匀分布 */
  }
  
  .fixed-cols {
    width: 100%; /* 左侧固定列占据整个宽度 */
    position: sticky; /* 使左侧列固定 */
    left: 0;
    background-color: #f8f9fa; /* 颜色仅作示例 */
    overflow-x: auto; /* 如果内容超过宽度，添加滚动条 */
  }

  .flex-cols { /* 可变列部分 */
    display: flex;
    flex-grow: 1; /* 自动填充剩余空间 */
  }

  /* 当窗口宽度小于某个阈值时，让固定列和可变列堆叠 */
  @media (max-width: 768px) {
    .fixed-table {
      flex-direction: column;
    }
    
    .fixed-cols,
    .flex-cols {
      flex-direction: column;
      width: 100%;
    }
  }
</style>

<table class="fixed-table">
  <thead>
    <!-- 左侧固定的表头 -->
    <tr class="fixed-cols">
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
      <th>列5</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
    <tr class="flex-cols">
      <td>数据1</td>
      <!-- 其他列... -->
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

在这个例子中，当屏幕宽度小于768像素时，表格会切换到垂直排列模式，左侧的固定列会紧挨着可变列显示。