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. git克隆出错 github clone Permission denied (publickey) fatal Could not read from remote repo

    原文网址:http://blog.csdn.net/feeling450/article/details/53067563 github clone "Permission denied ( ...

  2. python 连接MSSQL

    # -*- coding: utf-8 -*- import pymssql conn=pymssql.connect(host=".",user="sa",p ...

  3. python2.7入门---异常处理

        python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误.我们可以使用该功能来调试python程序. 异常处理. 断言(Assertions).     首先来看py ...

  4. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  5. 【python3.X】python学习中排雷过程^_^

    问题一:python读取文件时报错:“UnicodeDecodeError: 'gbk' codec can't decode byte 0x8d in position 52: illegal mu ...

  6. struts2官方 中文教程 系列八:异常处理

    在本教程中,我们将探讨如何启用Struts 2框架处理web应用程序生成的任何未捕获的异常.Struts 2提供了健壮的异常处理,包括能够自动记录任何未捕获的异常,并将用户重定向到错误web页面. 贴 ...

  7. 通过transpose和flip实现图像旋转90/180/270度

    在fbc_cv库中,提供了对图像进行任意角度旋转的函数rotate,其实内部也是调用了仿射变换函数warpAffine.如果图像仅是进行90度倍数的旋转,是没有必要用warpAffine函数的.这里通 ...

  8. MapRudecer

    MapReducer基本概念 Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用户编写的业务逻辑代码和自带默认 ...

  9. FRDM-KL25Z开发板上电试用

    1. 硬件平台:FRDM-KL25Z开发板,先看下板子,Cortex M0+的内核,板子上自带MMA8451Q的三轴加速度传感器,触摸滑动按键,openSDA调试器.MCU主频48MHz,有16KB ...

  10. 「Haskell 学习」一 环境与大致了解

    感谢<Real World Haskell>在网上的免费发布,可以白嫖学Haskell这个久闻大名的函数式编程语言了. 本文运行于openSUSE Tumbleweed下,运行相关命令时留 ...