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 ...
随机推荐
- maven的核心概念
1 简单的核心概念 1.1 坐标 groupId.artifactId.version,很简单,这三个坐标定位到了该依赖的位置,有了它们就可以下载该依赖了. 1.2 依赖 如果一个jar包使用了另外一 ...
- window异常处理——except_handler4以及栈展开分析
以前在15pb学习时候在看雪论坛发的一篇精华帖. 主要是分析在try块中发生嵌套异常时候堆栈是如何平衡的. 就不复制过来了,给个链接http://bbs.pediy.com/showthread.ph ...
- Java IO异常处理方式
public class IOException{ // 获取系统默认的行分隔符 private static final String LINE_SEPARATOR = System.getProp ...
- 在MyEclipse中改了项目名称，到tomcat的webroot下发现，部署的名称还是原来的。
在MyEclipse中改了项目名称,到tomcat的webroot下发现,部署的名称还是原来的. 解决方法:选中项目名称右键properties,展开Myeclipse,选择web,web Conte ...
- java 使用LinkedList模拟一个堆栈或者队列数据结构
近期在复习下java基础,看了下java基础,在看到集合时突然发现想起来曾经面试有一道笔试题:模拟一个堆栈或者队列数据结构,当时还没做出来,今天就写一下,首先得明确堆栈和队列的数据结构 堆栈:先进后出 ...
- Struts 2 类型转换器 输入校验 拦截器
Struts 2中内建了字符串类型和常见类型之间相互转换的转换器,能满足大多数转换需求,但不能完成字符串和User对象之间的转换. OGNL项目中有一个TypeConvert接口,这个接口是自定义类型 ...
- 聚合的安全类导航、专业的安全知识学习平台——By Me：）
以“基于对抗的安全研发”为初衷,让大家在工作中始终有安全意识.安全思维和安全习惯,几年前自己搭建了面向公司内部全员的安全晨报.现在站在“用户“的角度回头看看,觉得科目设计等很多方面都还有很多的不足: ...
- 009-JDK可视化监控工具-JConsole
Console工具在JDK/bin目录下,启动JConsole后,将自动搜索本机运行的jvm进程,不需要jps命令来查询指定.双击其中一个jvm进程即可开始监控,也可使用“远程进程”来连接远程服务器. ...
- java 多线程 day02 定时器
package com.czbk.thread; import java.util.Date;import java.util.Timer;import java.util.TimerTask; /* ...
- java反射基础知识（四）反射应用实践
反射基础 p.s: 本文需要读者对反射机制的API有一定程度的了解,如果之前没有接触过的话,建议先看一下官方文档的Quick Start. 在应用反射机制之前,首先我们先来看一下如何获取一个对象对应的 ...