Scrollable Table with Fixed Header

Hide the Scrollbar first

::-webkit-scrollbar { 
    display: none; 
}

Set the CSS of <tbody>

Change the display property, so that the height and overflow-y can be configured.

Set the height, and add overflow-y to make the table body scrollable in a range.

tbody{
  display: inline-block; // or block
  height: 120px;
  width: 100%;  // Width follow the <table>
  overflow-y: auto;
}

Set the CSS of <tr>, <th>, and <td>

Because we change the display of <tbody>, we also need to configure the width of each row and each element in <thead> and <tbody>.

<style>
  tr{
    display: flex;
  }
  th, td{
    flex:1;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Element</td>
    </tr>
  </tbody>
</table>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • **2014真題Directions:Read the following text. Choose the be...
    又是夜半驚坐起閱讀 11,131評論 0 23
  • 今天在 git clone 倉庫時發(fā)生了如下問題: 導(dǎo)致怎么也無法完成 clone,我以為是我的 public-k...
    趙者也閱讀 2,704評論 0 0
  • 是最近發(fā)生的兩件事才讓我意識到我性格里隱藏的另外一部分。 第一件事是三月在德國出差的時候,下班后去超市買東西,結(jié)賬...
    吳俐溫哪閱讀 409評論 8 1
  • 丫頭最近學(xué)習(xí)狀態(tài)不錯,又重拾了信心,加油。想想前段時間我的焦慮情緒直接影響到孩子,很是懊惱,學(xué)習(xí)的路上哪有一帆風(fēng)順...
    考運順閱讀 101評論 0 0
  • 全能解壓 - 跨平臺支持,速度超快,小伙伴們都在用 功能介紹 RAR文件解壓利器!全能解壓,Mac上最好用的解壓縮...
    云端漫步的太陽閱讀 1,402評論 0 2

友情鏈接更多精彩內(nèi)容