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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 10,127评论 0 23
  • 今天在 git clone 仓库时发生了如下问题: 导致怎么也无法完成 clone,我以为是我的 public-k...
    赵者也阅读 2,648评论 0 0
  • 是最近发生的两件事才让我意识到我性格里隐藏的另外一部分。 第一件事是三月在德国出差的时候,下班后去超市买东西,结账...
    吴俐温哪阅读 359评论 8 1
  • 丫头最近学习状态不错,又重拾了信心,加油。想想前段时间我的焦虑情绪直接影响到孩子,很是懊恼,学习的路上哪有一帆风顺...
    考运顺阅读 96评论 0 0
  • 全能解压 - 跨平台支持,速度超快,小伙伴们都在用 功能介绍 RAR文件解压利器!全能解压,Mac上最好用的解压缩...
    云端漫步的太阳阅读 1,385评论 0 2