亚洲欧美天堂乱全网一区,免费一区二区三区免费视频

技術(shù)頻道 - html技術(shù)

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

作者:admin 時(shí)間:2021-7-17 1:8:3 瀏覽:

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

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

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>

execcode getcode

代碼解釋

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

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

position的含義是指定位類(lèi)型，取值類(lèi)型可以有：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)：

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

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