tbody滚动条占位导致与thead表头错位
tbody出滚动条导致表头错位,上网上搜了一下,发现全是答非所问,能隐藏滚动条,还用问??
我当前作出的效果是当tbody内容在正常情况下显示时,不显示滚动条,当内容区域高度超过外部容器时,滚动条自动显示。外部容器的overflow设为auto,不要设为scroll,因为设为scroll时,滚动条始终出现。
下面是错位情况图:
方案一:
看到网上有说给td宽度加min-width和max-width,谷歌上确实有用,但是ie上不行,所以略过....
不考虑兼容的朋友可以用,毕竟用起来方便简单,地址 https://blog.csdn.net/AliceWu_1111/article/details/78964080
方案二:
考虑将表头用div>table>thead>th结构,将内容用div>table>tbody>td结构,外层仍是table结构,以图上结构为例:
<style>
.intblayout{ table-layout: fixed;width: 100%;padding: 0;}
.nonetr{height:0px;line-height:0;margin:0;padding:0;}
</style>
<table class="indexList f_left" width="49%" border="0" style="margin-left: 1%;">
<tr class="addtable_tit">
<td colspan="4" style="text-align: left; border-top: none;">
<p class="icon_left">
<span class="icon24 icon_todo"></span>待办事项
</p>
<p class="icon_right" style="text-align: right;">
<span class="icon24 icon_refresh" style="cursor: pointer;" title="更多" onclick="LoadSysTaskList()"></span>
<span class="icon24 icon_next" style="cursor: pointer;" title="刷新" onclick="LoadSysTask()"></span>
</p>
</td>
</tr>
<tr>
<td colspan="4" style="padding: 0;">
<div id="divSysTask" style="width: 100%;">
<table class="intblayout" border="0">
<tr>
<th width="15%">待办类型</th>
<th width="50%">待办任务名称</th>
<th width="20%">最晚处理日期</th>
<th width="15%">处理状态</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="padding: 0;">
<div style="overflow-y: auto;height: 216px;">
<table class="intblayout" >
<tr class="nonetr">
<td width="15%"></td>
<td width="50%"></td>
<td width="20%"></td>
<td width="15%"></td>
</tr>
<tbody id="tbSysTask“ class="tbConIndex"></tbody>
</table>
</div>
</td>
</tr>
</table>
<script> $(function(){
//滚动条占位问题 计算列表内容高度 出滚动条时表头padding-right 10px
var conList = $('.tbConIndex');
$(conList).each(function () {
var tbodyName = $(this).attr('id').slice(2);
if ($(this).height() > 216) {
$('#div' + tbodyName).css('paddingRight', '10px');
} else {
$('#div' + tbodyName).css('paddingRight', '0');
}
});
})
</script>
具体原理就是判断 内容区域(tbConIndex )的高度,如果大于216(内容区域高度),说明有滚动条出现,这个时候将表头的div设padding-right:10px;(10px是滚动条的宽度),下面是效果图(分别是有滚动条和无滚动条装填):
tbody滚动条占位导致与thead表头错位的更多相关文章
- table下tbody滚动条与thead对齐的方法且每一列可以不均等
1 前言 table下tbody滚动条与thead对齐的方法,开始在tbody的td和thead的tr>td,对每一个Item加入百分比,结果是没对齐.也尝试了用bootstrap的col-md ...
- 解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位
$(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...
- 解决element-ui表头错位的问题
经过测试得出: 使用element-ui的表格,并在table中设置固定height会出现表头错位的现象(不知道是什么bug) 解决方案: 将height改为max-height,设置固定高度为最大高 ...
- CSS设置table下tbody滚动条与thead对齐的方法
<style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {disp ...
- dataTable 加了竖向滚动条导致列头样式错位的问题 / 亲测可用,不好用你打我,用好了记得点推荐
tab在没有显示之前,容器是没有高度宽度的,而dt在自动计算高度和宽度时是获取的外部容器的高度和宽度,当切换tab时,dt获取不到这个高度宽度,导致列头都挤在一起,是用下面代码解决此问题 $('a[d ...
- table表格中实现tbody部分可滚动,且thead部分固定
1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...
- tbody 滚动条
ARRIVALS TO BRISTOL - ENGLAND FLIGHT CODE FROM STA ETA Notes T3 4264 ISLE OF MAN 11:40 11:42 LANDED ...
- CSS 设置table下tbody滚动条
table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:tabl ...
- 在EXT框架中,使用JS文件设置UEditor文本框,出现新增内容很多,页面变型,不出现滚动条,导致无法进行操作。
找到UEditor的配置文件:ueditor.config.js(这是我的项目的UEditor的配置文件名) 找到参数设置 autoHeightEnabled 是否自动增长参数,默认为TRUE 当默认 ...
随机推荐
- Linux文件处理命令touch、cat、more、head详解
命令touch详解 命令touch,所在路径及执行权限为: 可以看到,命令的路径为:/usr/bin/touch ,所以它的执行权限为所有用户 命令基本功能是创建空文件 (可以同时创建多个空文件,文件 ...
- MyBatis整合双数据源
有时候在项目中会遇到需要连接两个数据库的情况.本文就结合Spring和Mybatis来讲下怎么使用双数据源(或者是多数据源). 背景知识介绍 本文中实现多数据源的关键是Spring提供的Abstrac ...
- react中的ref的3种方式
2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...
- sprintf 会自动追加’\0’至字符串末尾
#define LEN_SERIAL_NUMBER (12) void C_CosemObjMeterInfo::SetSerialNum(U08 u08MeterId, U64 u64SerialN ...
- QTabWidget 中 关于Tab 关闭和添加的基本教程!
QTabWidget是PyQt5 中使用较为广泛的容器之一,经常会在日常使用的软件中用到它:QTabwidget是由几个标签组成,每个标签可以当作一个界面,下面就是应用Qtabwidget的一个简单例 ...
- 超详细实战教程丨多场景解析如何迁移Rancher Server
本文转自Rancher Labs 作者介绍 王海龙,Rancher中国社区技术经理,负责Rancher中国技术社区的维护和运营.拥有6年的云计算领域经验,经历了OpenStack到Kubernetes ...
- windows环境下tensorflow安装过程详解
写在最前: 在安装过程中遇到很多坑,一开始自己从官网下载了Python3.6.3或者Python3.6.5或者Python3.7.1等多个版本,然后直接pip install tensorflow或者 ...
- Java收徒,高级架构师关门弟子
最近感悟天命,偶有所得,故而打算收徒若干,以继吾之传承. 有缘者,可破瓶颈,走向架构师之峰,指日可待. 拜师要求: 1.工作经验:1年或以上. 2.入门费用:10000元(RMB). 联系方式(联系时 ...
- 图解MySQL索引(三)—如何正确使用索引?
MySQL使用了B+Tree作为底层数据结构,能够实现快速高效的数据查询功能.工作中可怕的是没有建立索引,比这更可怕的是建好了索引又没有使用到.本文将围绕着如何优雅的使用索引,图文并茂地和大家一起探讨 ...
- vc6.0创建文件时,出现很多烫烫烫解决方法
vc6.0创建文件时,出现很多烫烫烫烫解决方法 SWM2烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫.IA 如果项目文件放在桌面上 如:C:\Documents and Settings\txwtec ...