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

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

首先我们的布局使用的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. char 与 varchar 区别

    MySQL中的字符串有两个常用的类型:char和varchar,二者各有优势,下面我们来详细分析一下.  转载加补充 在建立数据库表结构的时候,为了给一个String类型的数据定义一个数据库的数据库类 ...

  2. c++求最小公倍数和最小公约数

    方法一:辗转相除法(欧几里得 Euclidean) 用“较大数”除以“较小数”,再用较小数除以第一余数,再用第一余数除以第二余数: 反复直到余数为零为止. #include<iostream&g ...

  3. Codeforces 1138 - A/B/C/D/E - (Undone)

    链接:https://codeforces.com/contest/1137 A - Skyscrapers 题解:对于每一段 $1$ 和每一段 $2$,统计他们的长度.因此对于相邻的两段长度求较小值 ...

  4. Codeforces 677 - A/B/C/D/E - (Undone)

    链接: A - Vanya and Fence - [水] AC代码: #include<bits/stdc++.h> using namespace std; ; int n,h; in ...

  5. grpc,protoc, protoc-gen-go,rust

    Rust 与服务端编程的碎碎念https://zhuanlan.zhihu.com/p/30028047 GRPC:golang使用protobuf https://segmentfault.com/ ...

  6. Windows10 家庭版 关闭Windows defender

    管理员权限打开cmd,输入下面命令: reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defender&quo ...

  7. 深度学习基础（一）LeNet_Gradient-Based Learning Applied to Document Recognition

    作者:Yann LeCun,Leon Botton, Yoshua Bengio,and Patrick Haffner 这篇论文内容较多,这里只对部分内容进行记录: 以下是对论文原文的翻译: 在传统 ...

  8. ffmpeg命令的使用

    参考博客:https://www.cnblogs.com/wainiwann/p/4128154.html 但是红色网页总结的 “ffmpeg 用法” 非常全面. http://www.360doc. ...

  9. Cutterman - 最好用的切图工具

    Cutterman - 最好用的切图工具 http://www.cutterman.cn/zh/cutterman

  10. Mac 报错：-bash: telnet: command not found

    解决方法 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/i ...