table表头固定问题

原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟

1. 双table法

表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgroup和col来对齐,或者直接设置th,td的宽度

2. 单table修改样式方法

设置表格体为display:block,表格head和表格body的行都是display:table

.tb tbody{display:block;height:300px;overflow:hidden;overflow-y:scroll;}
.tb thead,.tb tbody tr{
display:table;width:100%;table-layout:fixed;
}

参考: https://blog.csdn.net/hualele/article/details/52993315
    https://blog.csdn.net/qq_36340642/article/details/79353179

table表头固定问题的更多相关文章

  1. HTML table表头固定

    HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...

  2. 纯CSS实现table表头固定(自创备忘)

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  3. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  4. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

  5. table表头固定

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. table 表头固定

    <html> <head> <title>Test</title> <style type="text/css"> .d ...

  7. Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决

    原文地址,转载请注明出处:http://www.cnblogs.com/jying/p/6294063.html 做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不 ...

  8. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

随机推荐

  1. flask 中访问时后台错误 error: [Errno 32] Broken pipe

    解决办法:app.run(threaded=True) 个人理解:flask默认单线程,访问一个页面时会访问到很多页面,比如一些图片,加入参数使其为多线程

  2. ant + jmeter 自动化接口测试环境部署

    1.jdk下载安装 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.jmeter下载 jmeter官 ...

  3. JAVA 泛型方法<T>

    public static void main(String[] args) throws Exception { String[] arr = new String[]{"1", ...

  4. R语言学习笔记(九):fivenum()与quantile()

    fivenum() fivenum(x, na.rm = TRUE) x 为数值型向量,可以包含NA以及Inf,-Inf na.rm = TRUE 默认将NA和NaN去除,但是Inf还保留. five ...

  5. YSZOJ:#247. [福利]可持久化线段树 (最适合可持久化线段树入门)

    题目链接:https://syzoj.com/problem/247 解题心得: 可持久化线段树其实就是一个线段树功能的加强版,加强在哪里呢?那就是如果一颗普通的线段树多次修改之后还能知道最开始的线段 ...

  6. 关于springboot 连接mysql 数据库报错问题

    springboot连接MySQL运行报错: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more ...

  7. RTSC和XDCTool的理解

    1. 在使用TI的开发工具CCS中,里面有几个重要的概念,一直不太清晰,RTSC是什么,XDCTool是什么?包是什么?包的版本为啥都是4位的(比如mathlib_c66x_3_0_1_1)?star ...

  8. Eclipse+APKTool动态调试APK

    1. 所需工具 Eclipse. Apktool v2.0.6. 安卓SDK工具. 2. 重编译APK apktool d -d -o test test.apk 此时当前test目录下就是apkto ...

  9. 「日常训练」 Soldier and Traveling (CFR304D2E)

    题意 (CodeForces 546E) 对一个无向图,给出图的情况与各个节点的人数/目标人数.每个节点的人只可以待在自己的城市或走到与他相邻的节点. 问最后是否有解,输出一可行解(我以为是必须和答案 ...

  10. 2015年开源前端框架盘点TOP20

    2015年,榜单根据github上star数作为排名依据.(榜单中大部分为组件式框架, react.Angular等基础框架不在此篇讨论) 1.Bootstrap 类别/语言:HTML.CSS.Jav ...