HTML如何创建左列固定，内容可滚动的表格？-之路教程

创建 HTML

在 <div> 中添加一个 <table> 元素。
在 <table> 标签内添加 <tr> 元素。
在 <tr> 元素中使用具有 class 属性的 <th> 和 <td> 元素。

<div>
  <table>
    <tr>
      <th class="headcol">1</th>
      <td class="long">Hello World Hello World</td>
      <td class="long">Hello World Hello World</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long">Hello World Hello World</td>
      <td class="long">Hello World Hello World</td>
    </tr>
    <tr>
      <th class="headcol">3</th>
      <td class="long">Hello World Hello World</td>
      <td class="long">Hello World Hello World</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">Hello World Hello World</td>
      <td class="long">Hello World Hello World</td>
    </tr>
    <tr>
      <th class="headcol">5</th>
      <td class="long">Hello World Hello World</td>
      <td class="long">Hello World Hello World</td>
    </tr>
    <tr>
      <th class="headcol">6</th>
      <td class="long">Hello World Hello World</td>
      <td class="long">Hello World Hello World</td>
    </tr>
  </table>
</div>

HTML如何创建左列固定，内容可滚动的表格？

我们可以创建这样一个表格，它的第一列是固定的，右边的内容可以滚动。
为此，我们需要使用一些 CSS。

我们可以将第一列的位置属性设置为“绝对”并指定其宽度。

然后使用设置为“滚动”的overflow-x 属性对整个表。

在这个片段中，我们将展示所有需要的步骤。
让我们从创建 HTML 开始。

添加 CSS

使用边框折叠、边框间距和边框顶部属性设置 <table> 元素的样式。
使用 margin、border、white-space 和 border-top-width 属性设置 <td> 和 <th> 元素的样式。
指定 <div> 元素的宽度、溢出-x、溢出-y、左边距和填充属性。
使用“headcol”类的 position、width、left、top、border-top-width 和 margin-top 属性。

添加 :before 伪元素。

使用背景和字母间距属性设置“long”类的样式。

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid #000;
}
td, th {
  margin: 0;
  border: 1px solid #000;
  white-space: nowrap;
  border-top-width: 0px;
}
div {
  width: 450px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}
.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 2px;
  margin-top: -1px;
}
.headcol:before {
  content: 'Row ';
}
.long {
  background: #8cdba3;
  letter-spacing: 1em;
}

让我们看看完整的代码。

示例-创建具有固定左列和可滚动体的表格：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      table {
        border-collapse: separate;
        border-spacing: 0;
        border-top: 1px solid #000;
      }
      td,
      th {
        margin: 0;
        border: 1px solid #000;
        white-space: nowrap;
        border-top-width: 0px;
      }
      div {
        width: 450px;
        overflow-x: scroll;
        margin-left: 5em;
        overflow-y: visible;
        padding: 0;
      }
      .headcol {
        position: absolute;
        width: 5em;
        left: 0;
        top: auto;
        border-top-width: 2px;
        margin-top: -1px;
      }
      .headcol:before {
        content: 'Row ';
      }
      .long {
        background: #8cdba3;
        letter-spacing: 1em;
      }
    </style>
  </head>
  <body>
    <div>
      <table>
        <tr>
          <th class="headcol">1</th>
          <td class="long">Hello World Hello World</td>
          <td class="long">Hello World Hello World</td>
        </tr>
        <tr>
          <th class="headcol">2</th>
          <td class="long">Hello World Hello World</td>
          <td class="long">Hello World Hello World</td>
        </tr>
        <tr>
          <th class="headcol">3</th>
          <td class="long">Hello World Hello World</td>
          <td class="long">Hello World Hello World</td>
        </tr>
        <tr>
          <th class="headcol">4</th>
          <td class="long">Hello World Hello World</td>
          <td class="long">Hello World Hello World</td>
        </tr>
        <tr>
          <th class="headcol">5</th>
          <td class="long">Hello World Hello World</td>
          <td class="long">Hello World Hello World</td>
        </tr>
        <tr>
          <th class="headcol">6</th>
          <td class="long">Hello World Hello World</td>
          <td class="long">Hello World Hello World</td>
        </tr>
      </table>
    </div>
  </body>
</html>

日期：2020-06-02 22:15:07 来源：oir作者：oir

←如何添加一个类似链接HTML按钮

如何创建没有项目符号的无序列表→

创建 HTML

添加 CSS

示例-创建具有固定左列和可滚动体的表格：

目录