CSS设置table下tbody的滚动条的实现

  发布时间:2018-11-29 16:17:03   作者:阡路陌人   我要评论

这篇文章主要介绍了CSS设置table下tbody的滚动条的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

今天碰到一个关于对tabel的表的滚动事件,需求是表头不动,改变的是tbody,如果tbody里面的内容过多,让其进行滚动事件。

首先想到的就是利用css中overflow-y:scroll; 来进行内容的滚动,但是在处理tabel的display状态时,就将tabel表的布局给打乱了,如果给tabel的父级进行限制,则这个表会进行滚动。。。

在css上设置如下代码就可以了

table tbody {
    display:block;
    height:200px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch; // 为了滚动顺畅 
}

table tbody::-webkit-scrollbar {
    display: none; // 隐藏滚动条
}

table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

table thead {
    width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}

示例:table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>转载自·威易网CSS教程</title>
<style>
table tbody {
 display:block;
 height:195px;
 overflow-y:scroll;
}

table thead, tbody tr {
 display:table;
 width:100%;
 table-layout:fixed;
}

table thead {
 width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>

<body>
<table width="80%" border="1">
<thead>
 <tr>
 <th>姓名</th>
 <th>年龄</th>
 <th>出生年月</th>
 <th>手机号码</th>
 <th>单位</th>
 </tr>
</thead>
<tbody>
 <tr>
 <td>张三</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴</td>
 </tr>
 <tr>
 <td>张三封</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴与四十大盗</td>
 </tr>
 <tr>
 <td>张小三</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>腾讯科技</td>
 </tr>
 <tr>
 <td>张三</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>浏阳河就业</td>
 </tr>
 <tr>
 <td>张三疯子</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴</td>
 </tr>
 <tr>
 <td>张三</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴</td>
 </tr>
 <tr>
 <td>张大三</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴</td>
 </tr>
 <tr>
 <td>张三五</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴</td>
 </tr>
 <tr>
 <td>张刘三</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴</td>
 </tr>
 <tr>
 <td>张三</td>
 <td>18</td>
 <td>1990-9-9</td>
 <td>13682299090</td>
 <td>阿里巴巴</td>
 </tr>
</tbody>
</table>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解flex实现左右布局中按钮溢出隐藏效果

    这篇文章主要介绍了详解flex实现左右布局中按钮溢出隐藏效果的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-03
  • CSS设置table下tbody的滚动条的实现

    这篇文章主要介绍了CSS设置table下tbody的滚动条的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2018-11-29
  • 关于css中line-height(行高)设置无效的问题的解决方法

    这篇文章主要介绍了关于css中line-height(行高)设置无效的问题的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-29
  • html+css 实现简易导航栏功能

    这篇文章主要介绍了基于html+css 实现简易导航栏功能,主要就是css(级联样式表)对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
    2018-11-29
  • 详解为什么设置overflow为hidden可以清除浮动带来的影响

    在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题,那么为什么设置overflow为hidden可以清除浮动带来的
    2018-11-28
  • css制作tips提示框,气泡框,制作三角形的实现

    有时候我们的页面会需要这样的一些提示框或者叫气泡框,这篇文章主要介绍了css制作tips提示框,气泡框,制作三角形的实现,小编觉得挺不错的,现在分享给大家,也给大家做
    2018-11-28
  • css实现一个元素高度固定宽度按比例显示效果

    这篇文章主要介绍了css实现一个元素高度固定宽度按比例显示效果,本文给大家分享实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-28
  • 详解如何自定义CSS滚动条的样式

    本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。具有一定的参考价值,感兴趣的小伙伴们可以参考一
    2018-11-26
  • 纯css修改浏览器scrollbar滚动条样式示例

    这篇文章主要介绍了纯css修改浏览器scrollbar滚动条样式示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-23
  • css实现文字颜色渐变的三种方法

    在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天小编给大家带来了css实现文字颜色渐变的三种方法,一起看看
    2018-11-22

最新评论