本文介绍了html Table 表头固定的实现,分享给大家,具体如下:
<div class="wrapbox"> <div class="table-head"> <table> <thead> <th width="10%">合同号</th> <th width="30%">签约客户</th> <th width="20%">发布客户</th> <th width="10%">合同状态</th> <th width="30%">选定条件的发布周期额度</th> </thead> </table> </div> <div class="table-body"> <table> <tbody id="tbody"> </tbody> </table> </div> </div>
看看css
*{ padding:0; margin:0; } th{ border:1px solid #e6e6e6; line-height: 5vh; color:#666666; font-size: 16px; } table { border-collapse: collapse; width: 100%; } td { padding:5px; border:1px solid #e6e6e6; font-size: 14px; } .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;} .table-body{width:100%; height:94vh;overflow-y:scroll;} .table-head table,.table-body table{width:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;} .table-body table tr:hover { background-color:rgb(240, 249, 228); transition: .2s; }
其实关键之处在于
1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。
2、上边的div .table-head添加了样式padding-right:17px,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式overflow-y:scroll;
只要保证上述两点的话,你也可以做出固定表头的表格来,同时不会发生上下的列不对齐的问题,屡试不爽!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本文介绍了Css3新特性应用之视觉效果,具体有单侧阴影、不规则投影、染色体效果...
ecs 云服务器 怎么搭 建网站 ?ECS 云服务器 搭建网站,首先是到服务商购买一款...
1、语法 input name=myFile type=file 2、属性(以下三个仅HTML5支持,因此存在...
这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特...
目的 装饰器模式(Decorator Pattern) 的目的非常简单,那就是: 在不修改原有...
TOP云 (west.cn)7月25日消息,据外媒报道,近日极品三数字 域名 001.com发生交...
1. dhtmlxTree dHTMLxTree是一个功能丰富的Tree Menu控件。提供丰富的操作API, ...
最近写CSS3和js结合,遇到了很多次z-index不生效的情况: 1.在用z-index的时候,...
作者:AAhmad Shadeed 译者:前端小智 来源:shadeed 有梦想,有干货,微信搜索 ...
Flexbox布局模块旨在提供一个更有效的方式,在一个容器里面去布局分配空间。即使...