html table css 实现固定表头的办法
来源：互联网 发布：淘宝帐号交易平台 编辑：程序博客网 时间：2024/05/18 18:00
最近做到了要实现固定表头的一个数据列表table，在网上查了一些资料，总结出的办法，望大家提出建议或意见。
其原理大概如下：
将tbody用一个固定高度的div包起来，并使tbody的内容高度超过这div的高度，这样便会出现滚动条。同时因为要求表头固定，所以用另外一个table将表头写出来，但是要注意的是他的列宽要与table-content里的table列宽一致，这样就可以达到预期的效果。其实最主要的还是用到了colgroup和col标签，来格式化th和td的原理。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{width: 100%;}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
border: 1px solid #dcdcdc;
}
.table thead th,.table tbody td {
padding: 5px 10px;
vertical-align: middle;
word-break:break-all;
height: 30px;
text-align: center;
border: 1px solid #dcdcdc;
}
.table thead th{
font-size: 14px;
font-weight: 500;
}
.table tbody td {
height: 20px;
border-bottom: none;
}
.table tbody tr:first-child td {
border-top: none;
}
.table-content {
height: 50px;
overflow-x:hidden;
overflow-y:auto;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
}
.table-content .table {
border: none;
}
.table-content tbody td {
border-right: none;
}
</style>
</head>
<body>
<div class="main">
<div class="tabBox">
<table class="table">
<colgroup>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="200"></col>
<col width="200"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="100"></col>
<col width="*"></col>
</colgroup>
<thead>
<tr>
<th><input class="selectAll" type="checkbox" name="namecheck" value="" /></th>
<th>序号</th>
<th>商品名称</th>
<th>订单号</th>
<th>下单时间</th>
<th>账单金额(元)</th>
<th>总数量</th>
<th>已出库</th>
<th>待出库</th>
<th>联系人</th>
<th>联系人电话</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
</table>
<div class="table-content">
<table class="table">
<colgroup>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="200"></col>
<col width="200"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="100"></col>
<col width="*"></col>
</colgroup>
<tbody>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
- html table css 实现固定表头的办法
- html固定table表头的实现思路
- html Table实现表头固定
- html Table实现表头固定
- HTML/CSS实现<table>表头固定、表体滚动
- table表头和首列的表格固定-CSS实现的Table表头固定
- table表头和首列的表格固定-CSS实现的Table表头固定
- js、css实现table表头固定
- 纯css实现table表头固定
- css 固定table表头
- 推荐：用CSS实现的固定表头的HTML表格
- 用CSS实现的固定表头的HTML表格
- html 中固定表头的 table
- CSS实现固定表头 HTML表格
- Table实现表头固定
- HTML Table锁定表头（CSS实现）
- html中table固定表头
- 固定table的表头
- MAC 解决gradle project sync failed 问题
- Python 批量转换文件编码格式
- Jupyter ,数据科学的块级交互与快速展示工具
- 第十章 会话管理——《跟我学Shiro》
- 11.OP-TEE OS启动（二）
- html table css 实现固定表头的办法
- Git Error:Please move or remove them before you can merge
- Linux命令之tar命令的使用
- Fragment
- 详细介绍：Visual Object Classes Challenge 2012(VOC2012)
- redis （master/slave ）原理及配置
- Android Studio 添加Kotlin extensions支持
- mybaits Mapping中的知识
- HDU1052-Tian Ji -- The Horse Racing-贪心
