欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2020-11-11 16:17:14   作者：Jseven_KK   我要評(píng)論
這篇文章主要介紹了CSS實(shí)現(xiàn)表格首行首列固定和自適應(yīng)窗口的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

先了解幾個(gè)概念:

table-layout:

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

position : sticky

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

實(shí)現(xiàn)：

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

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

表格table, 寬度100%， 設(shè)置一個(gè)最小寬度，我這里設(shè)置1000px，這個(gè)根據(jù)個(gè)人設(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第一個(gè)粘性定位 */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }

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

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

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

整體代碼：

<!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,滾動(dòng)會(huì)跟著動(dòng)，所以單獨(dú)給每個(gè)元素設(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第一個(gè)粘性定位 */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }
    thead tr th:first-child {
      /* 第一個(gè)由于要保持上下和左右滾動(dòng)都不被覆蓋，設(shè)置在最上面 */
      z-index: 1;
      left: 0;
    }
  </style>
</head>


<body>
  <div class="box">
  <table  >
    <thead>
      <tr>
      <th>姓名</th>
      <th>學(xué)號(hào)</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ù)加油）

在這里插入圖片描述

到此這篇關(guān)于CSS實(shí)現(xiàn)表格首行首列固定和自適應(yīng)窗口的實(shí)例代碼的文章就介紹到這了,更多相關(guān)css實(shí)現(xiàn)表格首行首列固定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css display table 自適應(yīng)高度、寬度問題的解決

    這篇文章主要介紹了css display table 自適應(yīng)高度、寬度問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著
    2021-05-07

  • 詳解CSS多種三列自適應(yīng)布局實(shí)現(xiàn)

    這篇文章主要介紹了詳解CSS多種三列自適應(yīng)布局實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2021-02-24

  • CSS實(shí)現(xiàn)背景圖片屏幕自適應(yīng)的實(shí)現(xiàn)

    這篇文章主要介紹了CSS實(shí)現(xiàn)背景圖片屏幕自適應(yīng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)
    2020-12-07

  • css3實(shí)現(xiàn)自適應(yīng)瀏覽器圖片布局特效

    css3實(shí)現(xiàn)自適應(yīng)瀏覽器圖片布局特效是一款自適應(yīng)瀏覽器屏幕的水平列表div容器，好友頭像列表水平布局特效。
    2020-11-23

  • css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式

    這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-10-28

  • CSS將img圖片填滿父容器div并自適應(yīng)容器大小

    這篇文章主要介紹了CSS將img圖片填滿父容器div并自適應(yīng)容器大小,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編
    2020-10-23

  • css實(shí)現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應(yīng)的多種方法

    今天通過7種方法給大家介紹css實(shí)現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應(yīng)效果，每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2021-08-04

最新評(píng)論