纯CSS固定Table表格第一行(表头)、最后一行以及第一列

技术频道 - html技术

纯CSS固定Table表格第一行(表头)、最后一行以及第一列

作者:admin 时间:2023-3-31 9:52:55 浏览:

关于table表格固定行、列的实例，前面介绍过一些。

本文要介绍的实例，又进了一步，要求同时固定Table表格的第一行(表头)、最后一行以及第一列。

效果如图

demo download

实例介绍

本实例是纯CSS实现，可水平、垂直滚动table表格。水平滚动时，固定表格第一列；垂直滚动时，固定表格第一行和最后一个行。

HTML代码

HTML代码结构比较简单，可分为三个部分理解。

<thead></thead> 为表格表头（第一行）
<tfoot></tfoot> 为表格最后一行
<tbody></tbody> 为表格第一列

代码如下：

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>#</th>
      <th>position</th>
      <th>games</th>
      <th>goals</th>
      <th>assists</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>name</th>
      <th>#</th>
      <th>position</th>
      <th>games</th>
      <th>goals</th>
      <th>assists</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>morgan brian</td>
      <td>6</td>
      <td>midfielder</td>
      <td>83</td>
      <td>6</td>
      <td>11</td>
    </tr>
    <tr>
      <td>abby dahlkemper</td>
      <td>7</td>
      <td>defender</td>
      <td>47</td>
      <td>0</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

CSS代码

table {
  border-collapse: collapse; 
  font-family: helvetica;
  caption-side: top;
  text-transform: capitalize;
}

td, th {
  border:  1px solid;
  padding: 10px;
  min-width: 200px;
  background: white;
  box-sizing: border-box;
  text-align: left;
}

th {
  box-shadow: 0 0 0 1px black;
}

thead th, 
tfoot th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(20, 50%, 70%);
}

thead th:first-child,
tfoot th:first-child {
  left: 0;
  z-index: 3;
}

tfoot {
  position: -webkit-sticky;
  bottom: 0;
  z-index: 2;
}

tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: hsl(20, 50%, 70%);
}

tfoot td:first-child {
  z-index: 3;
}

tbody {
  overflow: scroll;
  height: 200px;
}

tr > :first-child {
  position: -webkit-sticky;
  position: sticky; 
  background: hsl(180, 50%, 70%);
  left: 0; 
}