如何使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>

相关问题

html 表格第一列在表格左右滑动的时候固定不动

您可以通过CSS的`position`属性和`z-index`属性来实现表格第一列固定不动。具体实现步骤如下：

1. 在表格的`<thead>`和`<tbody>`标签中分别为第一列添加一个`<th>`和`<td>`标签，并设置相应的样式。

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>固定列</td>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>固定列</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    ...
  </tbody>
</table>

2. 为表格的`<thead>`标签和`<tbody>`标签设置`display: block`属性，并设置表格的宽度和高度。

thead, tbody {
  display: block;
  width: 100%;
  height: 200px;
}

3. 为表格的`<tbody>`标签设置`overflow-y: scroll`属性，使其在纵向滚动时出现滚动条。

tbody {
  overflow-y: scroll;
}

4. 为表格的第一列`<th>`和`<td>`标签设置`position: sticky`属性和`left: 0`属性，使其固定在左侧。

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

这样就可以实现表格第一列固定不动了。完整的代码如下所示：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
  }
  thead, tbody {
    display: block;
    width: 100%;
    height: 200px;
  }
  tbody {
    overflow-y: scroll;
  }
</style>

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>固定列</td>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>固定列</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    ...
  </tbody>
</table>

html中制作四行五列精美表格

以下是制作四行五列精美表格的HTML代码：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
    <td>第一行第四列</td>
    <td>第一行第五列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
    <td>第二行第三列</td>
    <td>第二行第四列</td>
    <td>第二行第五列</td>
  </tr>
  <tr>
    <td>第三行第一列</td>
    <td>第三行第二列</td>
    <td>第三行第三列</td>
    <td>第三行第四列</td>
    <td>第三行第五列</td>
 </tr>
  <tr>
    <td>第四行第一列</td>
    <td>第四行第二列</td>
    <td>第四行第三列</td>
    <td>第四行第四列</td>
    <td>第四行第五列</td>
  </tr>
</table>