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

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

首先我们的布局使用的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. Linux下的awk文本分析命令实例(一)

    1.  入门实例1.1 显示最近登录的5个帐号: [root@localhost ~]# | awk '{print $1}' root root root root reboot 1.2 如果只是显 ...

  2. 浅谈SFTP和FTP的区别

    一.适用场景 我们平时习惯了使用ftp来上传下载文件,尤其是很多Linux环境下,我们一般都会通过第三方的SSH工具连接到Linux,但是当我们需要传输文件到Linux服务器当中,很多人习惯用ftp来 ...

  3. Linux 安装mysql mariadb配置

    CentOS 7.0 使用 yum 安装 MariaDB 与 MariaDB 的简单配置 1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server ...

  4. 使用jsonp请求本地json文件

    使用jsonp解决请求本地文件跨域问题 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. LaTeX参考文献出现问号

    自己用LaTeX编辑,忘记在\end{document}前面放: \bibliographystyle{ieeetr}\bibliography{sample-bibliography} 导致这个现象 ...

  6. windows 创建共享文件夹

    1.右键要共享的文件夹----“共享”------“指定特定用户”,出现如下对话框: 2.选择“Everyone”,点击“共享”按钮,如下: 3.打开“运行“(win+r),输入上图 双反斜杠后面的内 ...

  7. SpringBoot2.0整合mybatis、shiro、redis实现基于数据库权限管理系统

    转自https://blog.csdn.net/poorcoder_/article/details/71374002 本文主要介绍使用SpringBoot与shiro实现基于数据库的细粒度动态权限管 ...

  8. dyld_shared_cache_extract_dylibs failed

    文章来源:https://www.jianshu.com/p/e276a784fbee   s.png 数据线插上手机 Xcode->window   3.png   2.png 点击Unpai ...

  9. phpstorm 破解版

    原链接https://blog.csdn.net/gu_wen_jie/article/details/79136475

  10. web项目的一些常用设置

    给项目取别名: 03