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 ...
随机推荐
- python之MySQL学习——输出指定条件的结果集
# 引入pymysql模块 import pymysql as pm # 数据库连接 db = pm.connect(host=",database='task', charset='utf ...
- delphi ---ttoolbar，ttoolbutton
1.button style:tbsButton,tbsCheck,tbsDivider,tbsDropDown,tbsSeparator,tbsTextButton tbsButton:普通的控件 ...
- 12.php中无比坑爹的构造函数。
当你在php类中,写一个构造方法时,记得,一定要用__这是两个下划线,而不是一个.......... <?php class Car { // function _construct() { / ...
- Java基础 - 面向对象 - 类的定义
package mingri.chapter_6; import java.util.Scanner; public class Person { /* * 类变量 * 定义方法: * 数据类型 变量 ...
- Consistent hashing
Download source code - 20.3 KB What is libconhash libconhash is a consistent hashing library which c ...
- (转)RTP-H264封包分析
rtp(H264)第一个包(单一NAL单元模式)————-sps 80 {V=10,p=0,x=0,cc=0000} 60 {m=0,pt=110 0000} 53 70{sequence numbe ...
- Hadoop的分布式架构改进与应用
1. 背景介绍 谈到分布式系统,就不得不提到Google的三驾马车:GFS[1],MapReduce[2]和BigTable[3]. 虽然Google没有开源这三个技术的实现源码,但是基于这三篇开源 ...
- shell相关知识
在bash shell中,$( )与` ` (反引号)都是用来做命令替换用(command substitution)的.所谓的命令替换与我们第五章学过的变量替换差不多,都是用来重组命令行:*完成引号 ...
- window.event.keycode值大全
window.event.keycode值大全 event.keycode值大全 1 keycode 8 = BackSpace BackSpace 2 keycode 9 = Tab Tab 3 k ...
- SOAPUI 压力测试的指标项说明
soapUI Pro指标项说明: Test Step Sets the startup delay for each thread (in milliseconds), setting to ...