<fieldset id="casm6"></fieldset>

<del id="casm6"></del>

用css實現thead隨著滑動條滾動的table

fjcgreat 發布于2019-08-29 14:05 / 994人閱讀

摘要：時間用戶名稱品類型號數量多復制幾行可以看出效果留出滾動條寬度，以便和對齊的默認屬性是設置為后才能出現滾動條因為的默認屬性是，跟的是配套使用的。現在你把他們其中一個改了，自然就不再對齊了。所以以下兩步是非常關鍵的樣式用的是語法

時間	用戶名稱	品類	型號	數量
1111	1111	111	111	多復制幾行可以看出效果

table {
  width: 100%;
  height: 300px;   
  thead {
   //thead留出滾動條寬度，以便和tbody對齊
    width: calc( 100% - 1em );      
    height: 50px;
    line-height: 50px;
    display:table;
    width:100%;
    table-layout:fixed;
    th {
      text-align: center;   
    }
  }
  tbody {
    overflow-y: scroll;
    /*thead的display默認屬性是：table-header-group,
     *設置為block后才能出現滾動條*/         
    display: block;        
    height: 300px;
    tr {
      height: 50px;
      line-height: 50px;
      /*因為thead的display默認屬性是：table-header-group，
       *跟tbody的table-row-group是配套使用的。現在你把他們其中一個改了，
       *自然就不再對齊了。
       *所以以下兩步是非常關鍵的*/
      display:table;
      table-layout:fixed;
      width:100%;          
      text-align: center;          
    }
  }
}
//樣式用的是sass語法

云服務器 GPU云服務器 js 屏蔽滾動條滑動 css滾動條滾動條css html 滾動條 css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112914.html

我是如何做固定頭部(thead)的

摘要：我希望就用一個，盡可能的減少輔助節點，把這個事情搞定模擬我們嘗試給加上，再指定，然后這個就脫離的文檔流，固定在頁面頂部顯示了，還好，所有支持的瀏覽器都表現一致，就連也生效了。但是，使用或后，原本所占的高度就沒有了，因為脫離了文檔流。在前端開發中經常遇到需要頁面滾動時，固定某個區域顯示，常見表格的需求，因為表格有很多列，如果列名不固定在頂部顯示，滾動到底部時，可能就不知道某些列對應的是...

crossea 2019-08-20 14:50 評論0 收藏0
vue移動端復雜表格表頭，固定表頭與固定第一列

摘要：固定的表格頭部與第一列的寬高行高都是通過獲取真實的表格的寬高來設定的。通過展示的表格的上下滾動從而帶動固定在第一列的向上滾動，向左右滾動帶動覆蓋上表頭的的左右滾動。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言最近做移動端的h5項目，要做一個可配置表頭的復雜表格，網上找了很久也沒什么好方法，結合網上...

sarva 2019-08-23 10:26 評論0 收藏0
[總結]CSS/CSS3常用樣式與web移動端資源

摘要：不允許負值用百分比來定義縮放比例。解決這個很簡單，在父元素中使用即可解決該。列寬度由單元格內容設定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點點。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼：第一段文字選中效果第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 評論0 收藏0
教你實現首行及首列固定 Table

摘要：但單元格尺寸根據其不確定的內容伸展，且頂部及左側表頭也應隨之調整寬高。將的剝離進行整體置為覆蓋于之上，并將除首列單元格外的其它元素置為透明。先秀一下 demo！此款 Table 源碼~ 表面上，在頂部及左側懸掛兩欄并非難事。但單元格尺寸根據其不確定的內容伸展，且頂部及左側表頭也應隨之調整寬高。 Table 天然具備如此屬性，我們可將 thead 剝離進行 fixed，但首列每一項分散...

scq000 2019-08-30 13:57 評論0 收藏0