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. tp5 数据库信息导出到excel(带图片)

    function excel_down(){ //导入谁就去查谁 $data=Db::name('order_xueyou')->select(); // 导出Exl // import(&qu ...

  2. 微信小程序 提示框延时跳转

    wx.showToast({ title: '成功', icon: 'success', duration: 2000, success:function(){ console.log('haha') ...

  3. Git----使用WebHook实现代码自动部署

    起因: 经常本地push到gitee等线上代码仓库,然后登陆服务器在进行pull,很麻烦,想偷懒怎么办?使用git的webhook实现! 1.实现原理 1.1本地提交推送 1.2线上仓库监听push动 ...

  4. Kubernetes-tutorials(五)

    The tutorials use Katacoda to run a virtual terminal in your web browser that runs Minikube, a small ...

  5. R语言学习笔记(五):零碎知识点(11-15)

    11--which.min(), which.max()和which() which(x, arr.ind = FALSE, useNames = TRUE) x 是一个向量或者数组,可以是NA,但会 ...

  6. 【Leetcode】804. Unique Morse Code Words

    Unique Morse Code Words Description International Morse Code defines a standard encoding where each ...

  7. spfa专题

    SPFA专题 1通往奥格瑞玛的道路 在艾泽拉斯,有n个城市.编号为1,2,3,...,n. 城市之间有m条双向的公路,连接着两个城市,从某个城市到另一个城市,会遭到联盟的攻击,进而损失一定的血量. 每 ...

  8. LeetCode:12. Roman to Integer (Easy)

    1. 原题链接 https://leetcode.com/problems/roman-to-integer/description/ 2. 题目要求 (1)将罗马数字转换成整数:(2)范围1-399 ...

  9. java存储位置经典例子

    String a="a";String b="b";String c="ab";String d="ab";String ...

  10. Django admin源码剖析

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...