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

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

首先我们的布局使用的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. python set和get实现

    import math class Square: # 正方形 def __init__(self, l): self.length = l # 边长 def __setattr__(self, ke ...

  2. 案例源码解读及思路：RabbitMQ在springboot中的配置

    程序员的高级之处不是什么都会,而是对自己不会的进行抽象,然后完成自己的工作.比如对于RabbitMQ,按照字面理解,就将其看成Message Queue,也就是用来容纳对象的集合.很多功能都拆分给一个 ...

  3. hadoop伪分布环境快速搭建

    1.首先下载一个完成已经进行简单配置好的镜像文件(hadoop,HBASE,eclipse,jdk环境已经搭建好,tomcat为7.0版本,建议更改为tomcat8.5版本,运行比较稳定). 2安装V ...

  4. emoji表情softbank和unicode不兼容解决方案

    https://blog.ernest.me/post/emoji-remapping-solution

  5. 20144306《网络对抗》MAL_恶意代码分析

    一.基础问题 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控? 使用Windows自带的schtasks指 ...

  6. pycharm import pygame 出现报错：No module named 'pygame'

    首先发现装的Python 有问题原来的Python3.6.4版本安装完成后Scripts文件夹里空白的,什么也没有,从https://www.python.org/downloads/windows/ ...

  7. layui上传文件前端报404，实际文件已经上传成功

    原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 第一种 在后台上加上@ResponseBody 第二种 @ResponseBody @Request ...

  8. Docker入门4------Dockerfile

    转自:https://www.cnblogs.com/jsonhc/p/7766841.html https://www.cnblogs.com/jsonhc/p/7767669.html Docke ...

  9. linux sftp远程上传文件

    1.打开xshell 点击“新建文件传输”,如下图: 中间可能会出现下面的提示框,直接关掉即可: 2.切换到远程你要传输文件的目的地 命令:cd  你的路径 3.切换到本地文件所在目录 命令:lcd ...

  10. 19.1-uC/OS-III内存管理应用

    一个处理器,在不断地分配和释放内存的过程中,一整块连续的内存被分散为很多离散的小块内存, 这些叫做内存碎片, 内存碎片过多会导致内存的浪费. uC/OS 的内存管理机制就是为了尽量减少内存碎片.大致的 ...