CSS打造固定表头
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/test.css">
<title>表头固定内容滚动</title>
</head>
<body>
<div class="tableWrap" style="margin:20px;">
<label>可滚动表格——表格宽度自动每列宽度设置<col></label>
<table class="table-thead">
<colgroup>
<col width="">
<col width="">
<col width="">
<col width="">
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>账户名称</th>
<th>账户编号</th>
<th></th>
</tr>
</thead>
</table>
<div class="comTbody">
<table class="table-tbody" style="border-top: 0;">
<colgroup>
<col width="">
<col width="">
<col width="">
</colgroup>
<tbody>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div> <label>可滚动表格——表格宽度100%，列宽度设置<col></label>
<div class="table-wrap">
<div class="table-head">
<div class="table-head-wrap">
<table class="grid">
<colgroup>
<col style="width:80px">
<col>
<col>
<col style="width:150px">
</colgroup>
<thead>
<tr>
<th>
<span class="tab-link">序号</span>
</th>
<th>
<span class="tab-link">姓名</span>
</th>
<th>
<span class="tab-link">年龄</span>
</th>
<th>
<span class="tab-link">地址</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="table-content">
<table class="grid">
<colgroup>
<col style="width:80px">
<col>
<col>
<col style="width:150px">
</colgroup>
<tbody>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> <label>可滚动表格——表格宽度自动，列宽度固定设置<col></label>
<div class="data-grid">
<div class="data-view">
<div class="grid-head">
<div class="grid-head-inner">
<table class="data-table">
<tbody>
<tr class="data-table-row">
<td>
<div class="datagrid-cell cell-c1">
<div>Item ID</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<div>Product</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<div>List Price</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<div>Unit Cost</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<div>Attribute</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid-body">
<table class="datagrid-btable">
<tbody>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
CSS代码：
@charset "utf-8";
.tableWrap{
width:600px;
box-sizing: border-box;
}
.table-thead{
width:auto;
font-size: 14px;
background-color: #FFF;
border: 1px solid #CFCFCF;
border-collapse: collapse;
border-spacing: 0px;
}
.table-thead tr th{
text-align: left;
padding-left:10px;
border-right:1px solid #CFCFCF;
}
.table-thead tr th:last-child, .table-thead tr th:nth-last-child(){
border-right:;
}
.table-thead tr, .table-tbody tr{
height:35px;
}
.table-tbody{
width:auto;
font-size: 14px;
background-color: #FFF;
border-left:1px solid #CFCFCF;
border-collapse: collapse;
border-spacing: 0px;
}
.table-tbody tr{
border-bottom:1px solid #CFCFCF;
}
.table-tbody tr:last-child{
border-bottom: ;
}
.table-tbody tr td{
padding-left:10px;
padding-right:10px;
border-right:1px solid #CFCFCF;
}
.comTbody{
width:auto;
display: inline-block;
max-height:100px;
overflow-y: scroll;
border-bottom: 1px solid #CFCFCF;
}
.table-wrap{
width:550px;
outline: none;
position: relative;
font-size: 14px;
color:#;
border: 1px #e6e6e6 solid;
margin-bottom: 30px;
}
.table-head{
padding-right:17px;
background-color: #FAFAFA;
border-bottom: 1px #e6e6e6 solid;
}
.table-head-wrap{
width:%;
position: relative;
overflow: hidden;
}
.grid{
margin: 0px;
table-layout: fixed;
width: %;
max-width: none;
border-spacing: 0px;
empty-cells: show;
border-width: 0px;
outline: 0px none;
border-collapse: collapse;
}
.grid tr th{
padding: .929em .5em;
vertical-align: bottom;
overflow: hidden;
border-left: 1px #e6e6e6 solid;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.grid tr th:first-child{
border-left-width: ;
}
.grid tr td{
border-left: 1px #e6e6e6 solid;
border-bottom: 1px #e6e6e6 solid;
padding: .929em .5em;
overflow: hidden;
line-height: .6em;
vertical-align: middle;
text-overflow: ellipsis;
}
.grid tr td:first-child{
border-left-width: 0px;
}
.grid tr:last-child td{
border-bottom: none;
}
.tab-link{
display: block;
min-height: 18px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
}
.table-content{
height:221px;
white-space: normal;
position: relative;
width: %;
overflow-x: auto;
overflow-y: scroll;
min-height: ;
} .data-grid{
width: 698px;
height: 201px;
position: relative;
overflow: hidden;
font-size: 14px;
color:#;
box-sizing: border-box;
border-color: #95B8E7;
border-width: 1px;
border-style: solid;
}
.data-view{
width: 698px;
position: absolute;
overflow: hidden;
top: 0px;
right: 0px;
}
.grid-head{
width: 698px;
height: 30px;
border-color: #DDD;
overflow: hidden;
cursor: default;
border-width: 0px 0px 1px;
border-style: solid;
background-color:#efefef;
}
.grid-head-inner{
display: block;
float: left;
}
.data-table{
height: 30px;
border-collapse: separate;
}
.data-table-row{
height: 30px;
}
.data-table td{
border-color: #CCC;
border-width: 0px 1px 1px 0px;
border-style: dotted;
margin: 0px;
padding: 0px;
line-height: .65em;
}
.datagrid-cell{
margin: 0px;
padding: 0px 4px;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
height: 18px;
line-height: 18px;
font-size: 12px;
}
.cell-c1{
width:79px;
height:auto;
}
.cell-c2{
width:99px;
height:auto;
}
.cell-c3{
width:85px;
height:auto;
text-align: right;
}
.cell-c4{
width:100px;
height:auto;
text-align: right;
}
.cell-c5{
width:200px;
height:auto;
}
.grid-body{
width: 698px;
height: 168px;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.datagrid-btable{
border-collapse: separate;
}
.datagrid-btable tr{
height:25px;
}
.datagrid-btable tr td{
border-color: #CCC;
border-width: 0px 1px 1px 0px;
border-style: dotted;
margin: 0px;
padding: 0px;
}
CSS打造固定表头的更多相关文章
- css实现“固定表头带滚动条”的table
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- css控制固定表头，兼容行列合并
项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏 ...
- html css 如何将表头固定（转）
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
- 纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- html css 如何将表头固定
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
- css 固定表头的表格，和 width:auto, margin:auto等 自计算方法
实现思路: 外层用一个table,里面写好Header,然后里面再写一个table里面写好header.然后自己控制overflow的值使内部的tablemargin-top和外层的行高一致就可以实现 ...
- 原生javascript 固定表头原理与源码
我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫 "freeze- ...
- 固定表头/锁定前几列的代码参考[JS篇]
引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活 ...
- JQuery固定表头插件fixedtableheader源码注释
在开发XX车站信息系统时,需要将大量数据显示在一个巨大的表格内部,由于表格是一个整体,无法分页,加之数据很多,超出一屏,为了方便用户,决定使用固定表头的插件,经过测试,发现JQuery 插件:fixe ...
随机推荐
- 如何设置，使IntelliJ IDEA智能提示忽略大小写
- jquery slibings选取同级其他元素
jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始. <script type="text/javascript"&g ...
- java maven项目打包
使用IDEA打包,首先调出来maven projects窗口: 菜单栏Help->Find Action(Ctrl+Shift+A),输入Maven projects https://blog. ...
- 10.Query an Array-官方文档摘录
1.插入 db.inventory.insertMany([ { item: "journal", qty: 25, tags: ["blank", " ...
- Docker Libnetwork Bridge插件实现代码分析----创建网络部分
// drivers/bridge/bridge.go // Create a new network using bridge plugin 1.func (d *driver) CreateNet ...
- Andrew Ng机器学习编程作业:K-means Clustering and Principal Component Analysis
作业文件 machine-learning-ex7 1. K-means聚类 在这节练习中,我们将实现K-means聚类,并将其应用到图片压缩上.我们首先 从二维数据开始,获得一个直观的感受K-mea ...
- Selenium 安装与卸载
安装: 在cmd中键入pip install selenium==3.6.0(等号后面的为版本号),并点击回车,当出现Successfully installed selenium-3.6.0即表示已 ...
- Java排序算法总结（转载）
排序算法 平均时间复杂度 冒泡排序 O(n2) 选择排序 O(n2) 插入排序 O(n2) 希尔排序 O(n1.5) 快速排序 O(N*logN) 归并排序 O(N*logN) 堆排序 O(N*log ...
- RTSP客户端接收存储数据(live555库中的testRTSPClient实例)
1.testRTSPClient简介 testRTSPClient是个简单的客户端实例,这个实例对rtsp数据交互作了详细的描述,其中涉及到rtsp会话的两个概念Source和Sink. Source ...
- jvm堆配置参数
1.-Xms初始堆大小默认物理内存的1/64(<1GB)(官方建议)2.-Xmx最大堆大小默认物理内存的1/4(<1GB)(官方建议),实际中建议不大于4GB3.一般建议设置 -Xms=- ...