table 相關

固定 table 表頭

使用 display + overflow 達到固定 table 表頭的方法

/* 使用最簡單的滾動方法，在y軸實現滾動效果 */
table tbody {
    display: block;
    height: 100px;
    overflow-y: scroll;
}
/* 此時tbody寬度會變窄，tr設定寬度，並採用table佈局 */
table tr {
  width: 100%;
  display: table;
}
/* 隱藏滾動條 */
table tbody {
  /* firefox */
  scrollbar-width: none;
  /* ie10+ */
  -ms-overflow-style: none;
}
/* chrome safari */
table tbody::-webkit-scrollbar {
  display: none;
}

See the PenUntitledby GavinLin512 (@gavinlin512) onCodePen.

參考資料

• css極簡方法實現固定表頭table