卡卡網(wǎng)

關(guān)于table表格固定行、列的實例，前面介紹過一些。

• CSS實現(xiàn)：固定Table表頭和表腳
• CSS實現(xiàn)：固定Table表頭和第一列
• 表格(Table)固定第一列，其余列可水平滾動【實例源碼】
• 表格(Table)表頭固定，內(nèi)容上滾【5個實例】

本文要介紹的實例，又進(jìn)了一步，要求同時固定Table表格的第一行(表頭)、最后一行以及第一列。

效果如圖

demodownload

實例介紹

本實例是純CSS實現(xiàn)，可水平、垂直滾動table表格。水平滾動時，固定表格第一列；垂直滾動時，固定表格第一行和最后一個行。

HTML代碼

HTML代碼結(jié)構(gòu)比較簡單，可分為三個部分理解。

• <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; 
}

固定表格行（列）的關(guān)鍵代碼是position: sticky;這個屬性，它聲明該位置是粘性的，即是固定的。

代碼中我們看到thead th和tfoot th都有該屬性聲明，thead為第一行，tfoot為最后一行。

tr > :first-child 為第一列，它同樣聲明了position: sticky;屬性。

tbody為表格內(nèi)容行，它定義了高度為200px：height: 200px;，同時，它聲明了overflow: scroll;屬性，意思是溢出內(nèi)容滾動顯示。

總結(jié)

本文介紹了如何用純CSS固定Table表格第一行(表頭)、最后一行以及第一列，代碼比較簡單易理解，主要是使用了CSS的粘性屬性position: sticky;。

您可能對以下文章也感興趣

• CSS固定table表格表頭（第一行）和第一列【演示/源碼】
• CSS實現(xiàn)：固定Table表頭和表腳
• CSS實現(xiàn)：固定Table表頭和第一列
• 表格(Table)固定第一列，其余列可水平滾動【實例源碼】
• 表格(Table)表頭固定，內(nèi)容上滾【5個實例】

相關(guān)文章

• 3款淺灰色大氣通用Table表格CSS【實例演示/源碼下載】
• 2例精美CSS3圓角表格#懸停高亮行#斑馬條紋行#
• 3款精美漂亮的CSS3表格【實例演示#源碼下載#】
• 鼠標(biāo)移到表格上時，鼠標(biāo)所在行放大高亮顯示【實例】
• 漂亮CSS表格(Table)，最后一行是匯總行【實例】

• 點擊表格(Table)列表頭排序【實例】
• 用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡單實用】
• Table表格td之間有空隙？你少設(shè)了border-collapse
• 表格(Table)高亮顯示鼠標(biāo)所在列和行【6個實例】
• 4款簡單常見的純CSS表格(table)樣式

標(biāo)簽: table