卡卡網(wǎng)

當(dāng)表格寬度和高度太長(zhǎng)時(shí)，我們希望能把表格固定在一個(gè)區(qū)域內(nèi)，然后通過(guò)滾動(dòng)條來(lái)瀏覽表格各行各列的內(nèi)容，而在滾動(dòng)表格的過(guò)程中，固定表頭能讓用戶(hù)任何時(shí)候都知道哪一列是屬于什么項(xiàng)目，這樣設(shè)計(jì)就更加合理了。同樣地，如果第一列為項(xiàng)目名稱(chēng)，那么固定第一列就會(huì)顯得更加合理。本文就介紹如何使用CSS固定table表格第一行（表頭）和第一列。

效果如圖

demodownload

實(shí)例介紹

表格固定在一個(gè)div容器內(nèi)，超過(guò)div容器外的表格（行和列）將通過(guò)滾動(dòng)來(lái)顯示，水平、垂直均可滾動(dòng)。滾動(dòng)時(shí)，表格表頭和第一列是固定的。

HTML代碼

HTML代碼結(jié)構(gòu)很簡(jiǎn)單，table的id值為chart，表頭標(biāo)簽是<thead><tr><th></th></tr></thead>，表行標(biāo)簽是<tbody><tr><td></td></tr></tbody>。

<div id="chartWrapper">
    <table id="chart">
      <thead>
        <tr>
          <th>名字</th>
          <th>年齡</th>
          <th>工作</th>
          <th>電話(huà)</th>
          <th>備注</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>劉軍</td>
          <td>21</td>
          <td>教師</td>
          <td>136********</td>
          <td>--</td>
        </tr>
        <tr>
          <td>張?chǎng)?lt;/td>
          <td>26</td>
          <td>教師</td>
          <td>133********</td>
          <td>--</td>
        </tr>
        <tr>
          <td>李偉</td>
          <td>22</td>
          <td>教師</td>
          <td>139********</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
</div>

JavaScript

本實(shí)例用到JavaScript，并且用到一個(gè)第三方JS插件，詳細(xì)實(shí)現(xiàn)代碼作用請(qǐng)看注釋。

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery.ba-throttle-debounce.min.js'></script>
<script>
var chartTable = $('table#chart'),
chartWrapper = chartTable.parent(),
chartWidth = chartTable.width(),
chartHeight = chartTable.height();

/* 這可以進(jìn)一步調(diào)整，使圖表的寬度與視口相同。*/
function sizeChart() {
  /* 首先，使div盒子不比頁(yè)面寬。
     先隱藏圖表，這樣它就不能向外推頁(yè)面寬度，但可以固定
     臨時(shí)包裝，這樣?xùn)|西就不會(huì)彈來(lái)彈去了。然后測(cè)量
     沒(méi)有圖表的包裝器的寬度，該寬度應(yīng)填充
     它的容器。將此值設(shè)置為包裝的最大寬度，然后顯示
     再次打開(kāi)圖表并取消設(shè)置包裝高度。僅顯示滾動(dòng)條。 */
  chartWrapper.css({
    height: chartWrapper.height(),
    maxWidth: '' });

  chartTable.hide();
  var maxWidth = chartWrapper.width();
  chartWrapper.css({
    maxWidth: maxWidth,
    height: '',
    overflowX: chartWidth > maxWidth ? 'auto' : 'visible' });

  chartTable.show();

  /* 接下來(lái)，使包裝器不高于視口。通過(guò)測(cè)量視口的高度來(lái)完成此操作，
     然后減去第一行的偏移（不是頁(yè)眉，我們認(rèn)為它是粘性的）。
     僅在以下情況下顯示滾動(dòng)條。 */
  var viewportHeight = $(window).height(), //與 document.documentElement.clientHeight 相同
  firstRowOffset = chartTable.find('td:first')[0].getBoundingClientRect().top || 0;
  if (firstRowOffset > viewportHeight) {
    // 圖表在屏幕底部, 所以不需要 maxHeight
    maxHeight = '';
  } else if (firstRowOffset < 0) {
    // 圖表頂部離開(kāi)屏幕頂部，因此使圖表的高度與視口的高度相同
    maxHeight = viewportHeight;
  } else {
    // 圖表在屏幕上，所以要使其完全適合視口，但不能小于150px高
    maxHeight = Math.max(viewportHeight - firstRowOffset, 150);
  }
  chartWrapper.css({
    maxHeight: maxHeight,
    overflowY: chartHeight > maxHeight ? 'auto' : 'visible' });

}

// 現(xiàn)在運(yùn)行它，但不要太頻繁。
// 還可以考慮添加一個(gè)文本大小調(diào)整事件。
$(window).on('load resize scroll', $.throttle(1000, sizeChart));
</script>

CSS代碼

CSS代碼不多，下面是全部CSS代碼（詳細(xì)代碼作用請(qǐng)看注釋?zhuān)?/p>

div#page {
  max-width:900px; /* 只是為了展示水平滾動(dòng)和粘性 */
}
table#chart {
  width:1600px; /* 只是為了展示水平滾動(dòng)和粘性 */
  margin:0;
  border:none;
  background-color:#FFF;
  border-collapse:separate;
  border-spacing:0;
  border-left:1px solid #ccc;
}
table#chart th {
  background:#777;
  border-right:1px solid #999;
  color:#FFF;
  padding:3px;
  position:sticky;
  top:0;
  /* 確保向下滾動(dòng)時(shí)標(biāo)題行位于其他所有內(nèi)容之上 */
  z-index:1;
}
table#chart td {
  background:#fff;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding:4px 5px;
}
/* 確保向右滾動(dòng)時(shí)第一個(gè)標(biāo)題單元格位于其他單元格之上 */
table#chart th:first-child {
  position:sticky;
  left:0;
  z-index:2;
}
/* 向右滾動(dòng)時(shí)使第一列具有粘性 */
table#chart td:first-child {
  position:sticky;
  left:0;
  border-right-color:#aaa;
}

總結(jié)

本文介紹了如何使用CSS固定table表格第一行（表頭）和第一列，實(shí)例HTML和CSS代碼都不復(fù)雜，很好理解，不過(guò)需要用到第三方JS插件，并且用到JavaScript代碼來(lái)實(shí)現(xiàn)相關(guān)功能。

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

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

相關(guān)文章

• 3款淺灰色大氣通用Table表格CSS【實(shí)例演示/源碼下載】
• 2例精美CSS3圓角表格#懸停高亮行#斑馬條紋行#
• 3款精美漂亮的CSS3表格【實(shí)例演示#源碼下載#】
• 鼠標(biāo)移到表格上時(shí)，鼠標(biāo)所在行放大高亮顯示【實(shí)例】
• 漂亮CSS表格(Table)，最后一行是匯總行【實(shí)例】
• 點(diǎn)擊表格(Table)列表頭排序【實(shí)例】
• 4款簡(jiǎn)單常見(jiàn)的純CSS表格(table)樣式
• 4款純CSS實(shí)現(xiàn)的響應(yīng)式表格(Responsive Table)實(shí)例
• CSS的odd和even屬性實(shí)現(xiàn)table表格tr單雙行顏色相間而不同
• 純css實(shí)現(xiàn)的table表格樣式，教程站常用

標(biāo)簽: table