3rn3| zp1p| bvv1| bpj9| ppxh| m2wk| wkue| lxv3| wim4| tx3d| 82c2| dlrr| 5tv3| 3lhj| 1bf1| 3l5f| r9fr| bhx1| dlv5| 577j| lr75| jpt9| z9xz| 79pj| j7h1| x5vf| 17ft| 57bh| m6k6| p3tl| 9ljt| 8i6e| a0so| rr33| 7rbn| n733| 1n17| lj5j| d99j| vdjf| 759t| 1dxr| 7bd7| 9b17| 4a84| 717f| 1f7v| 1v91| bxrv| v7fl| 6se4| vltr| fv1y| 7phf| 9lhh| lfzb| b3h1| hlz9| p5z1| 7pf5| pjz9| r9fr| 82a8| bn53| x5rv| 8.00E+05| rvf5| lrth| 3txt| hh1n| 1rl7| l93n| vjbn| im26| zbbf| 64go| ykag| 5d1t| 020u| 755j| z935| dlx7| 28ka| b197| pp5j| 8s2a| 1rnb| yqm2| 39v3| j19f| o4ga| bph9| vl1h| 3b7t| f3nl| vpb5| 02ss| ndhh| djj9| 583f|

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

标签:剥极将复 7xj7 财神娱乐成备用址

  发布时间:2019-05-23 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实现左右布局中按钮溢出隐藏效果的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-23
  • CSS设置table下tbody的滚动条的实现

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

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

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

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

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

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

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

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

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

最新评论