手机在线观看成人国产亚洲AV,免费gv在线观看

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

CSS固定table表格表頭（第一行）和第一列【演示/源碼】

作者:admin 時間:2023-3-30 13:53:15 瀏覽:

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

效果如圖

demo download

實例介紹

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

HTML代碼

HTML代碼結(jié)構(gòu)很簡單，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>電話</th>
          <th>備注</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>劉軍</td>
          <td>21</td>
          <td>教師</td>
          <td>136********</td>
          <td>--</td>
        </tr>
        <tr>
          <td>張鑫</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

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

<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();

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

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

  chartTable.show();

  /* 接下來，使包裝器不高于視口。通過測量視口的高度來完成此操作，
     然后減去第一行的偏移（不是頁眉，我們認(rèn)為它是粘性的）。
     僅在以下情況下顯示滾動條。 */
  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) {
    // 圖表頂部離開屏幕頂部，因此使圖表的高度與視口的高度相同
    maxHeight = viewportHeight;
  } else {
    // 圖表在屏幕上，所以要使其完全適合視口，但不能小于150px高
    maxHeight = Math.max(viewportHeight - firstRowOffset, 150);
  }
  chartWrapper.css({
    maxHeight: maxHeight,
    overflowY: chartHeight > maxHeight ? 'auto' : 'visible' });

}

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

CSS代碼

CSS代碼不多，下面是全部CSS代碼（詳細(xì)代碼作用請看注釋）。

div#page {
  max-width:900px; /* 只是為了展示水平滾動和粘性 */
}
table#chart {
  width:1600px; /* 只是為了展示水平滾動和粘性 */
  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;
  /* 確保向下滾動時標(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;
}
/* 確保向右滾動時第一個標(biāo)題單元格位于其他單元格之上 */
table#chart th:first-child {
  position:sticky;
  left:0;
  z-index:2;
}
/* 向右滾動時使第一列具有粘性 */
table#chart td:first-child {
  position:sticky;
  left:0;
  border-right-color:#aaa;
}