html纵向表头,HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....
1.thead和tbody的display设置为block;
这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;
2.用两个table模拟,第一个作为thead,第二个作为tbody;
需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框会错开一点点;
3.今天在上找到的一个好方法,很好用,利用transform动态设置thead的scrollTop属性
模拟出来的固定表头,相对前两个方法简单很多,效果也很不错;
下面是原文链接:
2017-0524
有朋友发现了第三种方法的一个bug
没有边框是是没有任何问题的 如果th,td有边框的话 在滚动之后,th的边框会消失
经测试,发现原因为在transform时,th中的边框并没有移动,只有文字内容和背景色移动了, 而且再移动回初始位置时(即表格顶部),
背景色会盖在边框上面,导致看不到th的边框了
暂时只想到了一种勉强的替代方法, 就是在th中增加div, 这样 背景色,文字内容在滚动时,便不会覆盖边框了
但是在滚动时, 还是会有点儿瑕疵....
如果路过的大神感兴趣....希望能够帮忙解决掉......
html纵向表头,HTML table固定表头相关推荐
- element table固定表头,表的高度自适应解决方法
element table固定表头,表的高度自适应解决方法 参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...
- table固定表头滚动
一.table固定表头滚动(不兼容IE) 使用scrollTop监听滚动 如下例 1.html <div class="tabflow" id="flowta ...
- layui表格table固定表头第一行固定显示
layui表格table固定表头第一行固定显示 代码示例如下: layui.use('table', function(){$ = layui.jquery;var table = layui.tab ...
- table固定表头和首列
table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...
- 纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...
- php表滑动 其它固定,table固定表头使表单横向滚动
这次给大家带来table固定表头使表单横向滚动,table固定表头使表单横向滚动的注意事项有哪些,下面就是实战案例,一起来看一下. 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
- [HTML]TABLE固定表头和行头
TABLE固定表头和行头 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- el table 固定表头和首行_vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
- React开发(230):ant design table固定表头
固定表头 方便一页内展示大量数据.需要指定 column 的 width 属性,否则列头和内容可能不对齐. 如果指定 width 不生效或出现白色垂直空隙, 请尝试建议留一列不设宽度以适应弹性布局,或 ...
最新文章
- nero linux iso,NeroLINUX下载_NeroLINUX官方下载_NeroLINUX4.0.0.0-华军软件园
- android签名的应用-- 禁止未经授权签名的apk安装
- Ajax 开发中遇到的乱码问题
- Android6.0的Looper源码分析(1)
- 死磕java并发cas_死磕 java并发包之AtomicInteger源码分析
- 抢红包神器上线,再也不怕抢不到红包了!
- uni-app官方教程学习手记
- 受 SQLite 多年青睐,C 语言到底好在哪儿?
- (数据分析三板斧)第一斧Numpy-第二节:生成数组、数组属性和切片
- python数据结构之图深度优先和广度优先
- linux yum apr,CentOS安装、配置APR和tomcat
- 揭秘交通大脑——BATJ技术争夺战,滴滴与高德的AI新版图
- WebView 视频播放,全屏按钮显示不出来,全屏后不能播放视频
- 服务器硬防和软防是什么意思?服务器软件防火墙
- getopt.h和getopt(),getopt_long()等函数
- outlook电子邮件解析_放大Outlook 2007中的电子邮件
- 程序员的十大级别--看看你是哪个级别
- 使用nrm切换本地npm源
- java 打开ppt_如何使用Java读取PPT文本和图片
- 优秀!蚂蚁森林种3棵树,国家会给你发“好人证书”