table表头固定问题
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表头固定问题的更多相关文章
- HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...
- 纯CSS实现table表头固定(自创备忘)
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- table表头固定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- table 表头固定
<html> <head> <title>Test</title> <style type="text/css"> .d ...
- Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决
原文地址,转载请注明出处:http://www.cnblogs.com/jying/p/6294063.html 做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不 ...
- html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
随机推荐
- tp5 数据库信息导出到excel(带图片)
function excel_down(){ //导入谁就去查谁 $data=Db::name('order_xueyou')->select(); // 导出Exl // import(&qu ...
- 微信小程序 提示框延时跳转
wx.showToast({ title: '成功', icon: 'success', duration: 2000, success:function(){ console.log('haha') ...
- Git----使用WebHook实现代码自动部署
起因: 经常本地push到gitee等线上代码仓库,然后登陆服务器在进行pull,很麻烦,想偷懒怎么办?使用git的webhook实现! 1.实现原理 1.1本地提交推送 1.2线上仓库监听push动 ...
- Kubernetes-tutorials(五)
The tutorials use Katacoda to run a virtual terminal in your web browser that runs Minikube, a small ...
- R语言学习笔记(五):零碎知识点(11-15)
11--which.min(), which.max()和which() which(x, arr.ind = FALSE, useNames = TRUE) x 是一个向量或者数组,可以是NA,但会 ...
- 【Leetcode】804. Unique Morse Code Words
Unique Morse Code Words Description International Morse Code defines a standard encoding where each ...
- spfa专题
SPFA专题 1通往奥格瑞玛的道路 在艾泽拉斯,有n个城市.编号为1,2,3,...,n. 城市之间有m条双向的公路,连接着两个城市,从某个城市到另一个城市,会遭到联盟的攻击,进而损失一定的血量. 每 ...
- LeetCode:12. Roman to Integer (Easy)
1. 原题链接 https://leetcode.com/problems/roman-to-integer/description/ 2. 题目要求 (1)将罗马数字转换成整数:(2)范围1-399 ...
- java存储位置经典例子
String a="a";String b="b";String c="ab";String d="ab";String ...
- Django admin源码剖析
单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...