我们有个需求是这样的，鉴于我的表达能力还是直接上原型图吧

今天主要记录上面的第四条解决过程。

首先我们的布局使用的table，当想给tbody设置高度的时候，发现不起作用。原因是table的默认是display:table,如果想设置高度需要改成display:block/inline-block。这样改出现的问题是table的布局已经乱了。

所以我的布局结构是这样的

hidden_scroll和上面head的宽度是一样的，并设置overflow:hidden。

tbody_container容器在有滚动条情况下会比没有滚动条宽17px（一个滚动条的距离）,vue中通过：class控制，在给固定高度，并设置overflow-y:scroll，就可以实现滚动效果并隐藏滚动条了

附上个已经做好的效果

处理table 超出部分滚动问题的更多相关文章

  1. html中表table行循环滚动例子

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><meta h ...

  2. HTML5 元素超出部分滚动, 并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  3. CSS元素超出部分滚动，并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  4. 一种table超出高度自动出滚动条的解决方案

    在日常的开发过程中,我们可能会遇到这样一种需求,在指定高度内显示table,超过高度时表格出滚动条. 让我们带着这个问题,一起来探讨吧! <!DOCTYPE html> <html ...

  5. layui table 超出自动换行

    个人博客 地址:http://www.wenhaofan.com/article/20181120180507 layui 的table的的cell默认是超出hidden的,如果希望超出长度自动换行便 ...

  6. 想要table表格垂直滚动，加点CSS即可

    <style> /*设置 tbody高度大于400px时 出现滚动条*/ table tbody { display: block; height: 400px; overflow-y: ...

  7. swiper 内容超出纵向滚动 解决办法

    .swiper-slide { overflow: auto; }   var swiper = new Swiper('.swiper-container', { direction: 'verti ...

  8. 用js实现table内容从下到上连续滚动

    网上有很多用ul实现新闻列表滚动的例子,但是很少有直接用table实现列表内容滚动的例子,而Marquee标签滚动的效果不是很好,于是就自己写了一个,提供给攻城师朋友们参考 实现思路:由于table包 ...

  9. Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行

    今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...

随机推荐

  1. nodejs electron 创建桌面应用

    //首先安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org //使用cnpm进行安装,使用方法和npm相同 cn ...

  2. phpcms栏目标签调用

    $CATEGORY[$catid][catid]                栏目id   $CATEGORY[$catid][module]                栏目所在的模块   $C ...

  3. js判断PC端还是移动端

    function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobi ...

  4. Python学习之旅（一）

    Python的简介 Python是一种面向对象的.动态的脚本语言,可用来设计网页和开发后台功能.其创始人Guido van Rossum于1989年圣诞节期间创造了这门语言. (图片来自百度) Pyt ...

  5. ClientImageViewController

    package com.vcredit.ddcash.server.web.controller.common; import com.vcredit.ddcash.server.commons.mo ...

  6. Compile caffe on unbutu 16.0.4

    1. apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-dev libboost-all-dev libhd ...

  7. 在docker中使用mysql数据库，在局域网访问

    1.获取mysql镜像 docker pull mysql:5.6 注意:此处之所以获取mysql5.6是因为mysql5.7在centos7中启动可能会报错 2.查看镜像列表 docker imag ...

  8. 万能poi导入功能模板

    同时支持2007版本和2003版本,空行过滤,纯数字类型数据格式处理,日期格式处理等 package com.yss.db.util; import com.yss.base.common.excep ...

  9. RoR- Database setup& SQLite ... Migrations

    *rails uses SQLite for database by default *Built-in command-line DB viewer *Self-contained,server-l ...

  10. sql中遍历字符串

    在sql或者存储过程中会需要遍历字符串. ), --如111,222,333,尾部加, ), @Id int, ) set @split = ',' ) begin ,) ,charindex(@sp ...