通过css样式给表格tbody加垂直滚动条小白知识_表格小白帮助

tbody加滚动条实现思路:1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。2,把thead的tr设置成display:block。3,因为都设置成block所以要给td手动添加宽度。4,考虑到 tbody 产生了滚动条,这时会影响tbody以及thead的宽度,可以采用针对tbody设置::-

通过css样式给表格tbody加垂直滚动条小白知识

tbody加滚动条实现思路:

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

通过css样式给表格tbody加垂直滚动条小白知识_表格小白帮助

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:20%;
  }
.table td {
    width:20%;
  }
海计划公众号
(0)
上一篇 2020/03/26 23:36
下一篇 2020/03/26 23:36

您可能感兴趣的内容

  • Koala基础入门LESS/Sass/Compass/CoffeeScript编译工具

    Koala基础入门 官方网址:http://koala-app.com/index-zh.html GitHub:https://github.com/oklai/koala 简介…

    2020/03/05
  • background-attachement视差滚动指南教程_滚动入门教程

    之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。。。概述:滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。属性:background-attachment ,决定背景在视图中形态(固定、随区块固定),需配合background-image使用。值:backgro

    2020/03/29
  • johnny-five入门基础知识_Bocoup 的 JavaScript 机器和物联网编程框架

    johnny-five入门基础知识 官方网址:http://johnny-five.io GitHub:https://github.com/rwaldron/johnny-fiv…

    2020/03/06
  • ViralJS指南攻略_一款ExpressJS中间件的P2P Web应用分布

    ViralJS指南攻略 GitHub:https://github.com/PixelsCommander/ViralJS 简介描述:一款ExpressJS中间件的P2P Web应…

    2020/03/07
  • vue图片预加载使用帮助_加载小白攻略

    目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况。方法一项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序App.vuebeforeCreate(){let count = 0;let imgs = [//用require的方式添加图片地址,直接添加图片地址的话,在bui

    2020/03/24
  • 移动端H5页面指南教程input获取焦点时,虚拟键盘挡住input输入框解决方法_输入框指南教程

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法:方法一:使用window.scrollTo()
    function inpu

    2020/04/05
  • git强制覆盖master分支新手入门_git小白帮助

    在开发中,通常会保持两个分支master分支和develop分支,但是如果因为develop上面迭代太多而没有及时维护master,最后想丢弃master而直接将测试确认过的develop强推到master,该怎么操作呢?网上搜了一下,但是真正自己使用起来却又暴露出各种问题。因此,做如下总结分享,希望对遇到同样问题的人用帮助。场景一:master下有a.tx

    2020/04/03
  • 谈谈前端工程化是个啥?小白帮助_工程化小白常识

    目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?前端工程化就是解决以上问题而生的。前端工程化有四个特点:模块

    Web前端 2020/04/03
  • ichartjs使用帮助_基于HTML5图形图表组件

    ichartjs使用说明 官方网址:http://www.ichartjs.com/ GitHub:https://github.com/wanghetommy/ichartjs …

    2020/03/06
  • 为什么区块链是不可篡改的?菜鸟指南_区块链入门基础

    区块链的数据结构是由包含事务信息的块按远近顺序排列的。块按远近顺序在这个链中链接,每个块都指向前面的块。区块链通常被视为一个垂直堆栈,第一个块是堆栈底部的第一个块,然后将每个块放在前一个块的顶部。使用堆栈将块依次堆叠的概念可视化之后,我们可以使用一些术语,如“高度”来表示块与第一个块之间的距离;和“top”或“top”表示新添加的块。每个块头生成一个SHA2

    2020/03/23
  • reactxp基础入门_基于 React 和 React Native 的跨平台应用程序开发库

    reactxp基础入门 官方网址:https://microsoft.github.io/reactxp/ GitHub:https://github.com/Microsoft/…

    2020/03/06
  • DDoS攻击与CC攻击的区别是什么?菜鸟教程_攻击使用帮助

    随着互联网的兴起,各种网络攻击也随之日益频繁,各种恶意网络攻击给许多企业带来口碑、以及财务的巨大损失。近几年,最常见的网络攻击手段主要是DDoS攻击与CC攻击。因此,企业一定要做好网络安全攻略,防御DDoS攻击与CC攻击。那么,DDoS攻击和CC攻击到底是什么?这两者有什么区别呢?DDoS攻击DDoS攻击(分布式拒绝服务攻击)一般来说是指攻击者利用“肉鸡”对

    2020/03/23
  • 一段监视 DOM 的神奇代码指南教程_dom攻略教程

    通过使用此模块,只需将鼠标悬停在浏览器中,即可快速查看DOM元素的属性。基本上它是一个即时检查器。将鼠标悬停在 DOM 元素上会显示其属性!自己尝试一下复制下面的整个代码块,并将其粘贴到浏览器 Web 控制台中。现在将鼠标悬停在你正在浏览的任何网页上。 看到了什么?(function SpyOn() {const _id = ‘spyon-container

    2020/03/23
  • Web 3.0 前瞻:基于区块链的下一代浏览器指南教程_区块链小白指南

    ​现在有很多人把区块链崛起成为明星技术的历程,与互联网商业发展的黎明时代相提并论。在 90 年代初期,许多人对待新鲜技术持谨慎态度,却很少有人真正预见到人类的创新活动将会在未来 20 年中拓展到多远的边界。如今几乎每家公司都有自己的网站,各种技术也在飞速发展。但是,万维网是否已经走到了进化的巅峰呢?更快的数据传输和全球化趋势带来了许多全新的挑战。今天的网络已

    2020/03/20
  • 一种对开发更友好的前端骨架屏自动生成方案入门攻略_骨架屏小白知识

    一份来自 Akamai 的研究报告显示,在对 1048 名网购户进行采访后发现:约 47% 的用户期望他们的页面在两秒之内加载完成。如果页面加载时间超过 3s,约 40% 的用户会选择离开或关闭页面。一直以来,为了提升用户在页面加载时的体验,无论是 Web 还是 iOS、Android 的应用中,前端开发工程师都做了许多工作。除了解决如何让网页展现速度更快的

    2020/03/24
  • 什么时候需要自动化?使用说明_自动化菜鸟教程下载

    自动化是科技行业前进的方向,但它也是一把双刃剑。做对了,能够削减费用开销,减少维护工作;做错了,会让流程更加复杂,并增加预算。就像任何技术或流程一样,自动化在某些时候、某些地方是有效的,而在其他一些领域,要么不是很有效果,要么无效。如今, 自动化系统和人类之间的差距正在逐渐缩小,人类和机器各自最擅长领域的差异也越来越模糊。以前自动化系统受限于计算机的功能和效

    2020/03/23