码云笔记前端博客
Home > HTML/CSS > 纯css实现table的表头固定tbody内容显示垂直滚动条

纯css实现table的表头固定tbody内容显示垂直滚动条

2018-08-30 分类:HTML/CSS 作者:码云 阅读(1084)

本文共计1934个字,预计阅读时长需要5分钟。

最近在做项目是经常用到table表格来做数据统计,数据少时还好,但是数据多就会导致整个页面看起来乱,用户体验不好,为了使得用户体验更好,所以就会为table的内容上显示滚动条,这样即使再多的数据也不怕因为过多导致页面显示难看。实现的方法有很多,这里列举几个比较好的整理下来,作为一个学习笔记,也为需要的小伙伴提供思路。

首先要明确我们需要完成的效果:

1.固定表头

2.table垂直滚动条

3.table列宽自适应。

第一种css方法

html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table width="80%" border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>单位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>刘媛媛</td>
            <td>20</td>
            <td>百度</td>
        </tr>
        ......
    </tbody>
</table>

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* {
    margin: 0;
    padding: 0;
}
table {
    /*设置相邻单元格的边框间的距离*/
    border-spacing: 0;
    /*表格设置合并边框模型*/
    border-collapse: collapse;
    text-align: center;
}
/*关键设置 tbody出现滚动条*/
table tbody {
    display: block;
    height: 80px;
    overflow-y: scroll;
    overflow-x: hidden;
}
table thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
/*关键设置:滚动条默认宽度是16px 将thead的宽度减16px*/
table thead {
    width: calc( 100% - 1em)
}
table thead th {
    background: #ccc;
}

效果如图:

纯css为table的tbody内容显示垂直滚动条

上面的代码虽实现了滚动条功能,但美中不足的是滚动条超出表头thead,留有空隙,体验不好。

第二种方法

固定表头,将表头部分和表体部分分开写

html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 表头需要固定的地方  -->
<div id="elec_table">
    <div class="table-head">
        <table class="table theadstyle">
            <thead>
                <tr style="background: #ccc;">
                    <th>IP地址</th>
                    <th>端口</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<!-- 表体需要显示滚动条的地方  -->
<div class="table-body">
    <table class="table table-bordered" id="srvTable">
        <tr>
            <td>${zkinfo.zkIp }</td>
            <td>${zkinfo.zkPort}</td>
        </tr>
    </table>
</div>

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*外层容器设置高*/
#elec_table{
    position:relative;
    table-layout : fixed;
}
.table-body{
    overflow-y:auto;
    overflow-x:hidden;
    height:150px;
}
/*设置table-layout:fixed固定宽度,表头和表体需要对齐*/
table{
    table-layout:fixed;
}
/*设置单元格的宽度,可能会出现内容长需要换行的情况 使用white-space:normal,每个单元格都是一样的宽度*/
#elec_table td{
    width:20%;
    white-space:normal;
}
.theadstyle thead tr th{
    text-align:center;
}

效果如下图:

纯css为table的tbody内容显示垂直滚动条

从上图我们可以看出表体与表头完美重合,没有因为滚动条的出现导致错位现象。

网友方法

html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
table {
  width: 100%;
  text-align: left;
  min-width: 610px;
}
tr {
  height: 30px;
  padding-top: 10px
}
tbody {
  height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
  width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
  width: 20%;
  float: left;
}
td:nth-child(3),
th:nth-child(3) {
  width: 59%;
  float: left;
}
/* some colors */
thead {
  background-color: #333333;
  color: #fdfdfd;
}
table tbody tr:nth-child(even) {
  background-color: #dddddd;
}

效果:

纯css实现table的表头固定tbody内容显示垂直滚动条

以上就是所有关于table的滚动条添加实现方法,仅供大家参考学习,也欢迎大家留言交流。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(6) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
6

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 纯css实现table的表头固定tbody内容显示垂直滚动条

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 456 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 15 个
  • 标签总数: 1009 个
  • 建站时间: 494 天
  • 访问总量: 8652443 次
  • 最近更新: 2019年10月21日