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 ...
随机推荐
- windows 全角 怎么切换到半角
windows 全角 怎么切换到半角 :shift+空格键
- pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument.
Getting Started – Pug https://pugjs.org/api/getting-started.html GitHub - Tencent/wepy: 小程序组件化开发框架 h ...
- 如何基于Go搭建一个大数据平台
如何基于Go搭建一个大数据平台 - Go中国 - CSDN博客 https://blog.csdn.net/ra681t58cjxsgckj31/article/details/78333775 01 ...
- QQ视频直播架构及原理 流畅与低延迟之间做平衡 音画如何做同步？
QQ视频直播架构及原理 - tianyu的专栏 - CSDN博客 https://blog.csdn.net/wishfly/article/details/53035342 作者:王宇(腾讯音视频高 ...
- 解决：function in namespace ‘std’ does not name a type + allocator_/nullptr/dellocator_ was not declared + base operand of ‘->’ has non-pointer type ‘std::vector<cv::Mat>’ 错误编译时报错（caffe）
解决方法,用到了c++11,g++命令需要加上-std=c++11选项 附:g++默认的c++标准 gcc-6.4.0 gcc-7.2.0 默认是 -std=gnu++14gcc-4.3.6 gcc- ...
- 正则表达式 \b
引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...
- python项目环境的导出、导入
导出开发环境 pip freeze > requirements.txt # 文件导出路径 导入环境 pip install -r requirements.txt # pip 则会自动下载安装 ...
- CentOS7.1 KVM虚拟化之linux虚拟机安装(2)
一.上传ISO文件到/data/iso下 这里使用CentOS-5.5-i386-bin-DVD.iso 二.安装CentOS5.5 CentOS7.1 安装KVM虚拟机默认磁盘格式为qcow2(推荐 ...
- mysql以下c连接mysql数据库
1.安装sudo yum install mysql-devel 安装组件和库 2. #include <stdio.h> #include <stdlib.h> #incl ...
- 采购订单打印并预览PDF
*&---------------------------------------------------------------------* *& Report Z01MMF019 ...