如何创建一个具有固定左列和可滚动主体的HTML表格

一个表格基本上是由行和列（表格数据）组成的结构化数据集合。HTML表格使网页设计人员能够将文本、图像、链接、其他表格等数据组织成行和列的单元格。它们是使用 < table>标签创建的，该标签包括 < tr>标签用于表格行， < th>标签用于表头， < td>标签用于数据单元格。默认情况下， < td>下面的元素是普通的并且左对齐的。

示例

让我们来看下面的示例，它演示了HTML中一个简单的表格。

<!DOCTYPE html>
<html>
<head>
    <title>An example of a simple table</title>
</head>
<body>
    <table>
        <tr>
            <th>Country</th>
            <th>Capital</th>
        </tr>
        <tr>
            <td>India</td>
            <td>New Delhi</td>
        </tr>
        <tr>
            <td>United States of America</td>
            <td>Washington D.C.</td>
        </tr>
        <tr>
            <td>United Kingdom</td>
            <td>London</td>
        </tr>
        </tr>
    </table>
</body>
</html>

我们还可以使用CSS样式属性（如border、background-color、padding、margin、position、rowspan、colspan等）使表格看起来更具吸引力。

在本教程中，我们将讨论使用固定左列和可滚动主体创建HTML表格的方法。

使用position和overflow属性

元素的 position 属性指定了所使用的定位方法的类型（static、relative、absolute、fixed或sticky）。

语法

以下是语法：

position: static|absolute|fixed|relative|sticky;

其中，

Static: 元素按照它们在文档流中出现的顺序进行呈现。
Absolute: 元素相对于其第一个（静态）祖先元素的位置进行定位。
Fixed: 元素相对于浏览器窗口进行定位。
Relative: 元素相对于其默认位置进行定位，因此 “right:10px” 会将元素的右侧位置向右移动 10 像素。
Sticky: 元素的位置由用户的滚动位置确定。根据滚动位置，粘性元素在相对和固定模式之间切换。它在视口中相对定位，直到遇到给定的偏移位置，此时它会“粘在”这个位置上（就像 position: fixed）。

Overflow 属性

overflow 属性描述了如果内容超出元素框时应该发生什么情况。当元素的内容太大无法适应指定的区域时，该属性指示是裁剪内容还是添加滚动条。只有具有特定高度的块组件才能使用 overflow 属性。

语法

overflow: visible|hidden|clip|scroll|auto;

哪里，

Visible： 没有溢出剪裁。它在元素的边界之外呈现。这是默认设置。
Hidden： 溢出被剪裁，剩余内容被隐藏。内容可以通过编程来滚动。
Clip： 溢出被剪裁，剩余内容被隐藏。禁止滚动，包括编程滚动。
Scroll： 溢出被剪裁，但是添加了滚动条以访问剩余内容。
Auto： 在溢出剪裁的情况下，应添加滚动条以访问剩余内容。

对这两个属性有了简单的了解后，让我们看看如何使用它们创建一个固定的左列和一个可滚动的主体。

使用Position:absolute与Overflow-x:visible

当块级元素在左边和右边溢出时，overflow-x属性指定是否剪裁内容，添加滚动条或显示溢出内容。

例子

下面的例子通过为左列设置绝对位置和固定宽度，并将整个表格的overflow-x属性设置为滚动，创建一个左列固定、主体可滚动的效果。

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
    </title>
    <style>
       table {
        border-spacing: 0;
        border-top:1px solid deeppink;
      }
      td{
        border: 1px solid deeppink;
        border-top-width: 0px;
        letter-spacing:2px;
        text-align:center;
        background:lavenderblush;
      }
      th{
        border: 1px solid deeppink;
        border-top-width: 0px;
        letter-spacing:3px;
        text-align:center;
        background:lightpink;
        color:white;
      }
      div {
        width: 230px;
        overflow-x: scroll;
        margin-left: 146px;
        overflow-y: visible;
        padding: 0;
      }
      .left {
        position: absolute;
        width: 150px;
        left: 0;
        border-top-width: 1px;
        margin-top: -1px
      }
    </style>
  </head>
  <body>
    <div>
      <table class="fixed">
        <tr>
            <th class="left">ROLL NO.</th>
            <th>NAME</th>
            <th>MATHEMATICS</th>
            <th>PHYSICS</th>
            <th>CHEMISTRY</th>
        </tr>
        <tr>
          <td class="left">01</td>
          <td>Dimple</td>
          <td>100</td>
          <td>99</td>
          <td>99</td>
        </tr>
        <tr>
          <td class="left">02</td>
          <td>Celina</td>
          <td>99</td>
          <td>97</td>
          <td>96</td>
        </tr>
        <tr>
          <td class="left">03</td>
          <td>Rishi</td>
          <td>96</td>
          <td>94</td>
          <td >92</td>
        </tr>
        <tr>
          <td class="left">04</td>
          <td>Zeenat</td>
          <td>93</td>
          <td>90</td>
          <td>89</td>
        </tr>
        <tr>
          <td class="left">05</td>
          <td>Harsh</td>
          <td>90</td>
          <td>87</td>
          <td>85</td>
        </tr>
      </table>
    </div>
  </body>
</html>

使用Position:sticky

下面的例子展示了如何通过将左侧列的position属性设置为sticky来创建一个具有固定左列和可滚动内容的表格。在这种方法中，我们将不使用overflow属性。

例子

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
    </title>
    <style>
        table{
            border:2px solid navy;
            border-spacing:0;
        }
        td, th{
            border:1px solid lightblue;
        }
        .exterior {
        margin: auto;
        width: 350px;
        }
        .interior {
        position: relative;
        overflow: auto;
        white-space: nowrap;
        }
        .left {
        position: sticky;
        background-color: white;
        }
        .col1 {
        width: 100px;
        min-width: 100px;
        max-width: 150px;
        left: 0px;
        }
    </style>
  </head>
  <body>
  <div class="exterior">
  <div class="interior">
    <table class="table">
      <thead>
        <tr>
          <th class="left col1">EMPLOYEE ID</th>
          <th>NAME</th>
          <th>AGE</th>
          <th>DEPARTMENT</th>
          <th>EXPERIENCE</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="left col1">65</td>
          <td>Anisha Reddy</td>
          <td>25</td>
          <td>Operations</td>
          <td>2 years</td>
        </tr>
        <tr>
          <td class="left col1">210</td>
          <td>Alfiya Karim</td>
          <td>21</td>
          <td>Sales Stratergy</td>
          <td>0 years</td>
        </tr>
        <tr>
          <td class="left col1">149</td>
          <td>Rohan Sharma</td>
          <td>30</td>
          <td>Digital Marketing</td>
          <td>1 year</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</body>
</html>