卡卡網(wǎng)

前面文章介紹過(guò)《CSS實(shí)現(xiàn)：固定Table表頭和第一列》，今天介紹一下，如何用CSS實(shí)現(xiàn)：固定Table表頭和表腳。

CSS實(shí)現(xiàn)：固定Table表頭和表腳

demodownload

CSS

table {
  font-family: "Fraunces", serif;
  font-size: 125%;
  white-space: nowrap;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid black;
}
table td,
table th {
  border: 1px solid black;
  padding: 0.5rem 1rem;
}
table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
table tfoot {
  position: sticky;
  bottom: 0;
  z-index: 1;
}
table thead th,
table tfoot th {
  padding: 3px;
  width: 25vw;
  background: lightyellow;
}
table td {
  background: #fff;
  padding: 4px 5px;
  text-align: center;
}

table tbody th {
  font-weight: 100;
  font-style: italic;
  text-align: left;
  position: relative;
}
table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: lightyellow;
}
table thead th:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: lightyellow;
}

table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: lightyellow;
}
table tbody td:last-child {
  position: sticky;
  right: 0;
  background: lightyellow;
  z-index: 1;
}
caption {
  text-align: left;
  padding: 0.25rem;
  position: sticky;
  left: 0;
}

[role="region"][aria-labelledby][tabindex] {
  width: 550px;
  height: 400px;
  overflow: auto;
  box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.5);
  outline: 0;
}

HTML

<div role="region" aria-labelledby="caption" tabindex="0">
  <table>
    <caption id="caption">棒球隊(duì)號(hào)碼</caption>
    <thead>
      <tr>
        <th>Teams</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>Runs</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Teams</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>Runs</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>Milwaukee Brewers</th>
        <td>3</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>1</td>
        <td>3</td>
        <td>24</td>
      </tr>
      <tr>
        <th>Los Angles Dodgers</th>
        <td>0</td>
        <td>1</td>
        <td>4</td>
        <td>2</td>
        <td>4</td>
        <td>3</td>
        <td>0</td>
        <td>0</td>
        <td>2</td>
        <td>16</td>
      </tr>
    </tbody>
  </table>
</div>

execcodegetcode

代碼解釋

1、HTML代碼里的 role="region" 的 div 只是表格的定位，使用時(shí)可忽略這個(gè)標(biāo)簽。

2、CSS關(guān)鍵代碼 position: sticky; ，這里解釋一下這個(gè)sticky屬性。

position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和sticky，這里sticky是CSS3新發(fā)布的一個(gè)屬性。

position設(shè)置了sticky的元素，在屏幕范圍（viewport）時(shí)該元素的位置并不受到定位影響（設(shè)置是top、left等屬性無(wú)效），當(dāng)該元素的位置將要移出偏移范圍時(shí)，定位又會(huì)變成fixed，根據(jù)設(shè)置的left、top等屬性成固定位置的效果。

sticky屬性有以下幾個(gè)特點(diǎn)：

1. 該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
2. 當(dāng)元素在容器中被滾動(dòng)超過(guò)指定的偏移值時(shí)，元素在容器內(nèi)固定在指定位置。亦即如果你設(shè)置了top: 50px，那么在sticky元素到達(dá)距離相對(duì)定位的元素頂部50px的位置時(shí)固定，不再向上移動(dòng)。
3. 元素固定的相對(duì)偏移是相對(duì)于離它最近的具有滾動(dòng)框的祖先元素，如果祖先元素都不可以滾動(dòng)，那么是相對(duì)于viewport來(lái)計(jì)算元素的偏移量。

簡(jiǎn)單的說(shuō)，要讓sticky屬性生效的條件有以下兩點(diǎn)：

1. 一個(gè)是元素自身在文檔流中的位置
2. 另一個(gè)是該元素的父容器的邊緣

第一點(diǎn)上面已經(jīng)講過(guò)了，如果設(shè)置了top: 50px，那么元素在達(dá)到距離頂部50px時(shí)才會(huì)發(fā)生定位，否則并不會(huì)發(fā)生定位。

第二點(diǎn)則需要考慮父容器的高度情況：sticky元素在到達(dá)父容器的底部時(shí)，則不會(huì)再發(fā)生定位，如果父容器高度并沒(méi)有比sticky元素高，那么sticky元素一開(kāi)始就達(dá)到了底部，并不會(huì)有定位的效果。

您可能對(duì)以下文章也感興趣

• CSS實(shí)現(xiàn)：固定Table表頭和第一列
• 表格(Table)固定第一列，其余列可水平滾動(dòng)
• 表格(Table)表頭固定，內(nèi)容上滾【5個(gè)實(shí)例】
• 表格(Table)高亮顯示鼠標(biāo)所在列和行【6個(gè)實(shí)例】

標(biāo)簽: css  css3  table