tbody加滚动条实现思路:

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

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

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

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

办公资源网址导航 https://www.wode007.com

代码实现:

css:

  1. .table thead tr {
  2. display:block;
  3. }
  4. .table tbody {
  5. display: block;
  6. height: 100px;
  7. overflow: auto;
  8. }
  9. .table th {
  10. width:%;
  11. }
  12. .table td {
  13. width:%;
  14. }

html:

  1. <table class="table">
  2. <thead>
  3. <tr>
  4. <th>head1</th>
  5. <th>head2</th>
  6. <th>head3</th>
  7. <th>head4</th>
  8. <th>head5</th>
  9. <th>head6</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr>
  14. <td></td>
  15. <td></td>
  16. <td></td>
  17. <td></td>
  18. <td></td>
  19. <td></td>
  20. </tr>
  21. <tr>
  22. <td></td>
  23. <td></td>
  24. <td></td>
  25. <td></td>
  26. <td></td>
  27. <td></td>
  28. </tr>
  29. <tr>
  30. <td></td>
  31. <td></td>
  32. <td></td>
  33. <td></td>
  34. <td></td>
  35. <td></td>
  36. </tr>
  37. <tr>
  38. <td></td>
  39. <td></td>
  40. <td></td>
  41. <td></td>
  42. <td></td>
  43. <td></td>
  44. </tr>
  45. <tr>
  46. </tbody>
  47. </table>

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

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

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

  2. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  3. 动态加载/删除css文件以及图片预加载

    动态加载/删除css文件以及图片预加载   功能模块页面   最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...

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

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

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

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

  6. Bootstrap全局CSS样式之表格

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

  7. CSS样式之表格,表单

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

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

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

  9. JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(n ...

随机推荐

  1. Java实现背包问题

    1 问题描述 给定n个重量为w1,w2,w3,-,wn,价值为v1,v2,-,vn的物品和一个承重为W的背包,求这些物品中最有价值的子集(PS:每一个物品要么选一次,要么不选),并且要能够装到背包. ...

  2. 河青的持久层框架hqbatis

    谈到对数据库的操作,powerbuilder 的嵌入式SQL还是最方便的,增.删.改.查都无比的方便,可惜它落败于BS架构的盛起.java 以mvc的框架,实现对数据库的操作,写起来是相当麻烦,jav ...

  3. 5、vue的传值

    1-父组件向子组件  -父组件向孙子组件传值(属性传值) //父组件<template> <div id='app'> <headera v-bind:hea=" ...

  4. 通过与C++程序对比,彻底搞清楚JAVA的对象拷贝

    目录 一.背景 二.JAVA对象拷贝的实现 2.1 浅拷贝 2.2 深拷贝的实现方法一 2.3 深拷贝的实现方法二 2.3.1 C++拷贝构造函数 2.3.2 C++源码 2.3.3 JAVA通过拷贝 ...

  5. PyQt5 对话框示例

    import sys from PyQt5.QtWidgets import * from PyQt5.QtGui import * class Example(QMainWindow): def _ ...

  6. centos7.2挂载硬盘攻略

    远程SSH登录上CentOS服务器后,进行如下操作: 提醒:挂载操作会清空数据,请确认挂载盘无数据或者未使用 第一步:列出所有磁盘 命令: ll /dev/disk/by-path ll /dev/d ...

  7. Bash知识点记录

    变量的设置规则   1.  等号两边不能直接接空格符.   2. 右侧的变量内容若有空格符,可使用双引号或单引号将变量内容括起来,其中, 双引号内的特殊字符如 $ 等,可以保有原本的特性.如下所示: ...

  8. DS-4-单链表的各种插入与删除的实现

    typedef struct LNode { int data; struct LNode *next; }LNode, *LinkList; 带头结点的按位序插入: //在第i个位置插入元素e bo ...

  9. DOCLever环境搭建

    简介 DOClever是一个可视化免费开源的接口管理工具 ,可以分析接口结构,校验接口正确性, 围绕接口定义文档,通过一系列自动化工具提升我们的协作效率. 环境搭建 准备: node: 官方下载:ht ...

  10. Java 源码刨析 - HashMap 底层实现原理是什么?JDK8 做了哪些优化?

    [基本结构] 在 JDK 1.7 中 HashMap 是以数组加链表的形式组成的: JDK 1.8 之后新增了红黑树的组成结构,当链表大于 8 并且容量大于 64 时,链表结构会转换成红黑树结构,它的 ...