CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼

發(fā)布時間：2020-11-11 16:17:14 作者：Jseven_KK

這篇文章主要介紹了CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

今天校招筆試題要求實現(xiàn)一個首行首列固定，寬度自適應窗口變化，但窗口縮小到一定寬度不能再縮小，出現(xiàn)水平滾動條…
當時我寫錯了，我一時想不起改用什么辦法首行首列固定，用絕對定位，父親相對定位…這樣會有很多問題要解決…
所以回來我學了一下，以前教程沒學過這些屬性，漲知識了哈哈…

先了解幾個概念:

table-layout:

table-layout屬性有兩種特定值：
auto（預設(shè)值）-表格的總寬度決定每一個儲存格（cell）的最大值
fixed - 表格的總寬度決定于表格width的定義,以及各欄位（column）width的定義, 沒有定義寬度就平分表格寬度。
表格寬度通過表格的寬度來設(shè)置，某一列的寬度僅由該列首行的單元格決定，其他行單元格的寬度不會影響整列的寬度。
注意：自定義寬度要定義在首個單元格才有效果（th）

position : sticky

粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。
在目標區(qū)域中可見時，他的行為就像relative 不會有任何變化，而當頁面滾動超出目標區(qū)域時，他的表現(xiàn)改為fixed會固定于目標位置
sticky元素會“固定”在離它最近的一個擁有“滾動機制”的祖先上（當該祖先的overflow是hidden、scroll、auto、overlay時), 即便這個祖先不是最近的真實可滾動祖先。
要注意的是當position : sticky應用于table，只能作用于th和td，作用tr沒有效果，并且一定要定義目標位置 left / right / top / bottom 才會出現(xiàn)固定效果！

實現(xiàn)：

1.自適應
表格外包一層div，寬度100% ，溢出出現(xiàn)滾動條

.box {
      width: 100%;
      height: 200px;
      background-color: #eee;
      overflow: auto;
       margin: 10px;
    }

表格table, 寬度100%，設(shè)置一個最小寬度，我這里設(shè)置1000px，這個根據(jù)個人設(shè)定哈

table {
      width: 100%;
      min-width: 1000px;
       /* 自定義寬度要設(shè)置成fixed */
      table-layout: fixed;
      /* 設(shè)置單元格間距 */
      border-spacing:0;
    }

2.固定首行首列
需要在首行th 和首列設(shè)置粘性定位
首行設(shè)置

thead tr th {
      /* th設(shè)置粘性定位 */
      background-color: pink;
      position: sticky;
      top: 0;
        /* 頂部border */
        border-top: 1px solid black;
    }

首列設(shè)置

 td:first-child {
      /* td第一個粘性定位 */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }

如果需要改變單元格寬度，需要設(shè)置table-layout: fixed
這個屬性設(shè)置了默認單元格平分table寬度，如果首列第一個單元格（th）設(shè)置了固定寬度200px，那么這列寬度就是200px
注意是第一個單元格

td:first-child,th:first-child {
         /* 設(shè)置首列200 ,設(shè)置th才有效，這里加上td主要是為了設(shè)置Border*/
         width: 200px;
         border-left: 1px solid black;
    }

還有一個注意地方是邊框border,要單獨設(shè)定每個單元格邊框border, 如果border collapse,滾動會跟著動,效果不好看。

整體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 100%;
      height: 200px;
      background-color: #eee;
      overflow: auto;
      margin: 10px;
    }
    table {
      width: 100%;
      min-width: 1000px;
       /* 自定義寬度要設(shè)置成fixed */
      table-layout: fixed;
      /* 設(shè)置單元格間距 */
      border-spacing:0;
    }
    
    td,th {
      border-bottom: 1px solid black;
      border-right: 1px solid black;
      box-sizing: border-box;
      /* 超出長度顯示 ... */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    td:first-child,th:first-child {
         /* 設(shè)置首列200 ,設(shè)置th才有效*/
         width: 200px;
         border-left: 1px solid black;
    }
    /* 如果border collapse,滾動會跟著動，所以單獨給每個元素設(shè)置border */
    td:last-child, th:last-child {
      border-right: 1px solid black;
    }
    th:last-child, td:last-child {
      border-right: 1px solid black;
    }
    .last td {
      /* 最后一行底部border */
      border-bottom: 1px solid black;
    }
    
    thead tr th {
      /* th設(shè)置粘性定位 */
      background-color: pink;
      position: sticky;
      top: 0;
        /* 頂部border */
        border-top: 1px solid black;
    }
   
    td:first-child {
      /* td第一個粘性定位 */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }
    thead tr th:first-child {
      /* 第一個由于要保持上下和左右滾動都不被覆蓋，設(shè)置在最上面 */
      z-index: 1;
      left: 0;
    }
  </style>
</head>


<body>
  <div class="box">
  <table  >
    <thead>
      <tr>
      <th>姓名</th>
      <th>學號</th>
      <th>年齡</th>
      <th>成績</th>
      <th>愛好</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>可樂11111111111111111111111111111111111111111111111111111111</td>
        <td>可樂11111111</td>
        <td>可樂222222222</td>
        <td>可樂333333333333333333333333333</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
      <tr class="last">
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
        <td>可樂</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

效果：（做的還不是很好，繼續(xù)加油）

在這里插入圖片描述