tbody加滚动条实现思路:

1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。

2,把thead的tr设置成display:block。

3,因为都设置成block所以要给td手动添加宽度。

4,考虑到 tbody 产生了滚动条,这时会影响tbody以及thead的宽度,可以采用针对tbody设置::-webkit-scrollbar进行解决。

代码实现:

.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 100px;
overflow: auto;
}
.table th {
width:%;
}
.table td {
width:%;
}

通过css样式给表格tbody加垂直滚动条的更多相关文章

  1. 怎么给tbody加滚动条?通过css样式给表格tbody加垂直滚动条

    tbody加滚动条实现思路: 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto. 2,把thead的tr设置成display:block. ...

  2. 给tbody加垂直滚动条的具体思路

    [给tbody加垂直滚动条的具体思路] 给tbody加垂直滚动条的思路就是把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto即可 参考:http ...

  3. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  4. Bootstrap表格中,thead固定,tbody有垂直滚动条

    1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...

  5. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  6. CSS样式之表格,表单

    布局样式 .container:固定宽度并具响应式 .container-fluid自由宽度(100%宽度) 标题样式 <h1>到<h6> 样式已经写好了,可以直接用,兼容性也 ...

  7. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  8. Bootstarp--全局CSS样式之表格

    表格在实际开发中可以说是非常常见的,但是有很多人不喜欢使用表格,但个人觉得在简单的界面布局中使用表格还是很简单的.毕竟人家给了表格这元素,而你却不去使用,貌似有点不解风情. 下面简单介绍Bootstr ...

  9. 笔记:1.css样式,最前边加 @charset "utf-8";是为什么2.js判断各种浏览器的方法

    表明CSS文件的页面编码为UTF-8..如果这个CSS的文件编码也是UTF-8的话..那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文,如果CSS的文件编码和页面不一致 ...

随机推荐

  1. mysql Update语句 语法

    mysql Update语句 语法 作用:用于修改表中的数据.广州大理石机械构件 语法:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 mysql Update语句 示例 ...

  2. SPOJ 2798 QTREE3 - Query on a tree again!

    原oj题面 Time limit 2000 ms Memory limit 1572864 kB Code length Limit 50000 B OS Linux Language limit A ...

  3. FMDB源码解析(上)-FMDB基本使用

    目录 一: 初识FMDB 二: 基本使用 三: 基本操作 结束 最后更新:2017-02-22 2017, 说到做到 一: 初识FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的 ...

  4. mac 电脑设置密码可以直接使用 passwd 这个命令

    mac 电脑设置密码可以直接使用 passwd 这个命令 说明:这个命令行级别的设置会直接影响到我们登录.

  5. Model 层

    package com.test.mvp.mvpdemo.mvp.v1.model; import com.test.mvp.mvpdemo.mvp.v1.MainContract; import o ...

  6. HTML转换PDF及SWF及图片

    一.源码特点        在一些应用场景中,出于某些目的(例如需要对文章内容进行保护,禁止用户真接复制文字内容),不能直接提供HTML的方式进行浏览,那么就需要将文章内容转换为其它的格式如PDF.图 ...

  7. loadrunner常用函数整理

    1.int web_reg_save_param("参数名","LB=左边界","RB=右边界",LAST);   //注册函数,在参数值出 ...

  8. Python编程:从入门到实践—变量和简单数据类型

    变量的命名和使用 #!/usr/bin/env python# -*- encoding:utf-8 -*- message ="Hello Python world!"print ...

  9. P1058立体图

    一道大模拟 思路: 首先是打表找规律时间 仔细思考(暴力手算)后推出这么一个数组: //宽的增加量 ]={,,,};//1竖着摞,2横着摞,3前后摞 //长的增加量 ]={,,,};//1竖着摞,2横 ...

  10. iOS即时通讯之CocoaAsyncSocket源码解析五

    接上篇:iOS即时通讯之CocoaAsyncSocket源码解析四         原文 前言: 本文为CocoaAsyncSocket Read篇终,将重点涉及该框架是如何利用缓冲区对数据进行读取. ...