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

zhenbling發表於2017-12-26
CSS
時間 使用者名稱稱 品類 型號 數量
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語法

相關文章