当前位置: 首页 > news >正文

overflow问题--滚动设置?

左边保持不变,右边多出来的table的td要设置为overflow:scroll,但是有个问题,就是,无论td的宽度设置为多少,它都会按照表格的百分之百来自适应,根本不会出现滚动条,查阅了一些资料以后,找到了解决方案。 
1.table要给它设定一个父级div,并且设置父级div的属性 
-overflow:auto;display:block。 
2.设置table的属性 
-min-width:100% 
3.设置table td的属性: 
-min-width:50px

代码:<style> div{ overflow:auto; display:block; } div table{ min-width:100%; } div table td{ min-width:50px; } </style> <div style="overflow:auto;display:block"> <table style="min-width:100%"> <tr> <td>test</td> <tr> </table> </div>

 

table的head不动,body如何设置overflow:scroll

html结构

<table class="sys-table">
                <thead> <tr> <th>序列</th> <th>系统ID</th> <th>系统名称</th> <th>是否启用</th> <th>publicKey</th> <th>司机指标</th> <th>货主指标</th> </tr> </thead> <tbody> <tr> <td>序列</td> <td>系统ID</td> <td>系统名称</td> <td>是否启用</td> <td>publicKey</td> <td>司机指标</td> <td>货主指标</td> </tr> </tbody> </table>

sass样式

.sys-table{
        width: 100%;
        border-collapse:collapse; border-spacing:0; thead { display: block; width: 100%; background-color: orange; } tbody{ display: block; height: 70px; background-color: palegoldenrod; overflow-y: auto; width: 100%; } tr{ display: block; width: 100%; border-bottom: 1px solid $white; } td,th{ padding: 10px; text-align: center; } }

转载于:https://www.cnblogs.com/duanzhange/p/8969094.html

相关文章:

  • Apache Curator操作zookeeper的API使用
  • AutoEx应用崩溃自动匹配Stack Overflow的解答
  • Hessian入门
  • node常用模块---path
  • JPA的配置文件
  • 简单了解JS中的几种遍历
  • Go语言中的反射机制reflect
  • 面试题:servlet jsp cook session 背1
  • linux下安装redis扩展
  • 总结:设计模式之Template Method模式
  • 深入浅出以太坊智能合约
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • 第一个博客,南沙的星星
  • IO创建Socket通信中慎用BufferReader中的readLine()
  • lambda表达式的简单入门
  •  D - 粉碎叛乱F - 其他起义
  • ES2017异步函数现已正式可用
  • gops —— Go 程序诊断分析工具
  • Java 多线程编程之:notify 和 wait 用法
  • js算法-归并排序(merge_sort)
  • js中forEach回调同异步问题
  • React的组件模式
  • Spring Boot快速入门(一):Hello Spring Boot
  • vue-router的history模式发布配置
  • 当SetTimeout遇到了字符串
  • 高性能JavaScript阅读简记(三)
  • 缓存与缓冲
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 我从编程教室毕业
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 正则表达式小结
  • FaaS 的简单实践
  • ​Linux Ubuntu环境下使用docker构建spark运行环境(超级详细)
  • # 计算机视觉入门
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (2)nginx 安装、启停
  • (done) 两个矩阵 “相似” 是什么意思?
  • (Redis使用系列) Springboot 在redis中使用BloomFilter布隆过滤器机制 六
  • (vue)页面文件上传获取:action地址
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • (排序详解之 堆排序)
  • (一)基于IDEA的JAVA基础12
  • .Net Core/.Net6/.Net8 ,启动配置/Program.cs 配置
  • .net 后台导出excel ,word
  • .Net(C#)常用转换byte转uint32、byte转float等
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • .net中生成excel后调整宽度
  • /boot 内存空间不够
  • [C++]——带你学习类和对象
  • [CF482B]Interesting Array
  • [Electron] 将应用打包成供Ubuntu、Debian平台下安装的deb包
  • [HTML]Web前端开发技术18(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用——喵喵画网页