纯Css固定表格表头,表头与表格对齐

//控制表格滑动

table tbody {

display:block;

height:450px;

overflow-y:scroll;

}

//固定表头

table thead, tbody tr {

display:table;

width:100%;

table-layout:fixed;

}

//调节表头宽度

table thead {

background-color:#f5f5f5;

width: calc( 100% - 1.25em );

}

如果出现表头与下面表格没有对齐,只需要修改width: calc( 100% - 1.25em );中的xxem即可

原文地址:https://www.cnblogs.com/AsCrazy/p/11538289.html

时间: 2024-08-01 05:14:44

纯Css固定表格表头,表头与表格对齐的相关文章

css 纯css自适应页面 示例

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>纯CSS自适应响应式Table数据表格DEMO演示</title> 6 7 <style> 8 *{ 9 box-sizing: border-box; 10 -webkit-box-sizing: border-box; 11 -moz-box-sizing: b

css手写一个表头固定

Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要遇到的个问题就是固定以后数据表格与表头的对齐问题,也看了很多我文章试下来都不怎么成功,只好自己一点点试 表头固定的一般思路是布两个table,一个放表头,一个放表格体,然后将表格体加上高度height以及overflow-y <div class="content"> <

固定table的表头CSS&amp;JQuery

対応ブラウザのバージョン Internet Explorer 9 / 10 / 11 Firefox 29 Google Chrome 34 Safari 5 Opera 12 表头固定的方法 <table class="table-design tablelock1"> <thead> <tr> <th>TableHeader1</th><th>TableHeader2</th> <th>

NPOI导出多表头Execl(通过html表格遍历表头)

关于NPOI的相关信息,我想博客园已经有很多了,而且NPOI导出Execl的文章和例子也很多,但导出多表头缺蛮少的:今天要讲的通过自己画html表格:通过html表格来导出自定义的多表头: 先来看要实现的多表头格式: 第一步:画html表格(备注有一定的格式要求) //td需要4个属性,rowspan(跨行数).colspan(跨列数).row(所在行).col(所在列):备注:其实除了跨行和跨列数外,后面只需要所在列都可以了: <tr> <td rowspan="2"

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

在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚动 html code(source table): <table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="tabl

网页制作中在头部固定悬浮table表头(thead)的方法

这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简单的,就当页面滚动,判断表头到窗口的距离,当=0的时候触发事件然后让表头position:fixed不就万事大吉了吗?于是我对漂亮又萌萌哒的产品妹子说,放心吧,这个简单的很一会就能完事,当时我的表情是这样的 但是当我开始写(首先你要知道,我是个js小白,表问我为什么...),问题就来了.首先,这个页

JavaScript:固定table的表头

当表格数据很多,以致于容器块元素出现滚动条.而在滚动滚动条的时候,数据行会被块元素遮挡.若要保持表格的head部分始终在可视范围内,我们需要对表头进行特殊的样式设置.下面的jsp代码可以实现表头固定,经过测试可以直接使用.在IE浏览器下,拉动滚动条时表头会抖动,在谷歌下确实很流程,估计是浏览器的兼容性问题. <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

三种纯CSS方法实现等高列

在这篇文章里, 我会介绍三种使用纯css的方式来实现等高列的方法.在网页布局中设置列等高是比较常见的, 所以写这篇文章就是要总结下一些优雅的纯CSS解决方案. 插图自己弄得,不喜莫喷 哈哈.. 下面介绍的三种方法都只用到了CSS , 不涉及jQuery.JavaScript计算实现的方法,所以我把它这篇文章标题设为:三种纯CSS方法实现等高列. 方法-1: 使用Margins, Paddings和 Overflow来实现 第一种方法使用margins, paddings和overflow来迫使列