CSS教程,CSS固定表头的HTML表格

CSS教程：CSS固定表头的HTML表格

本教程将教你如何使用CSS固定HTML表格的表头，以便在滚动表格内容时，表头保持可见。这种方法对于需要滚动大量数据的表格非常有用，因为用户可以始终看到表头中的列标题，而无需将自己的视线移到表格的顶部。

步骤1：HTML添加固定表头所需的CSS类

首先，我们需要通过HTML的class属性添加一个CSS类，以用于裸表格的样式：

<table class="fixed_header">

步骤2：CSS设定表格的样式

这个固定表头的技巧基于CSS的定位特性。首先，我们需要将表格中的表头行设置为fixed位置，并将z-index设置为1，以确保它们可见于其他表格行的上方。同样，我们还需要设置其他表格单元格的高度和溢出属性，以便它们的内容不会在单元格边界之外显示。

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

.fixed_header th {
  padding: 10px 15px;
  text-align: left;
  font-weight: bold;
  border-top: 1px solid #767676;
  border-bottom: 1px solid #767676;
  background-color: #F7F7F7;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fixed_header td {
  padding: 10px 15px;
  border-bottom: 1px solid #767676;
  height: 50px;
  overflow-x: hidden;
  overflow-y: auto;
}

这里，我们还应用了一些其他的CSS样式来使表格看起来更好。请注意，我们使用了position: sticky特性，在表格滚动时使表头保持在顶部。这种方式的好处是，不需要JavaScript来实现这个效果，并且在现代浏览器中得到很好的支持。

步骤3：完整的示例

让我们来看一个完整的示例，以便更好地理解所需的CSS和HTML结构。在这个示例中，我们使用了一些“假数据”来填充表格。

<!DOCTYPE html>
<html>
  <head>
    <title>Fixed Header CSS Example</title>
    <style>
        /*CSS样式*/
    </style>
  </head>
  <body>
    <table class="fixed_header">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Address</th>
          <th>Phone Number</th>
          <th>Email</th>
          <th>Company</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1001</td>
          <td>John Doe</td>
          <td>123 Main Street</td>
          <td>555-1234</td>
          <td>johndoe@example.com</td>
          <td>ABC Industries</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>Jane Smith</td>
          <td>456 Elm Street</td>
          <td>555-5678</td>
          <td>janesmith@example.com</td>
          <td>XYZ Corporation</td>
        </tr>

        <!-- 其他假数据省略 -->
      </tbody>
    </table>
  </body>
</html>

示例中使用了一个虚构的表格数据，这些数据按ID、姓名、地址、电话号码、电子邮件和公司列排列。在CSS样式中，我们设置了表格和表头行的样式，还设置了单元格的高度和溢出属性，以便它们不会在表单元格外面显示。

示例2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fixed Header Table</title>
    <style>
      /*CSS样式*/
    </style>
</head>
<body>
    <table class="fixed_headers">
        <thead>
            <tr>
                <th>爱好</th>
                <th>年份</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>游泳</td>
                <td>2018年</td>
            </tr>
            <tr>
                <td>阅读</td>
                <td>2018年</td>
            </tr>
            <tr>
                <td>跑步</td>
                <td>2018年</td>
            </tr>
            <!-- 省略其他行 -->
        </tbody>
    </table>
</body>
</html>

.fixed_headers
{
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}
.fixed_headers td, .fixed_headers th
{
    border: 1px solid black;
    padding: 5px 10px;
}
.fixed_headers th
{
    font-size: 10pt;
    font-weight: bold;
    background-color: #E6EEEE;
    border-top: 0;
    position: sticky;
    top: 0;
}

这种表格的固定头布局是非常有用的，比如用于显示与日期相关的数据，用户可以在滚动数据时，一直看到表头中的日期列。另外一个常见的应用场景是金融类的交易方面的应用，显示交易的信息，当交易很多时，可以使用该技术方便用户查看。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS教程,CSS固定表头的HTML表格 - Python技术站

CSS教程,CSS固定表头的HTML表格

相关文章