HTML table标签实现表头固定

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div><table cellspacing="0" border="0" cellpadding="0"><thead><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr></thead><tbody><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr></tbody></table></div></body>
</html>
<style>div {overflow: auto;width: 400px;height: 290px;/* 固定高度 */border: 1px solid gray;border-bottom: 0;border-right: 0;}td,th {border-right: 1px solid gray;border-bottom: 1px solid gray;width: 100px;height: 30px;box-sizing: border-box;}th {background-color: lightblue;}table {border-collapse: separate;table-layout: fixed;width: 100%;/* 固定寬度 */}td:first-child,th:first-child {position: sticky;left: 0;/* 首行在左 */z-index: 1;background-color: lightpink;}thead tr th {position: sticky;top: 0;/* 第一列最上 */}th:first-child {z-index: 2;background-color: lightblue;}
</style>

HTML table标签实现表头固定相关推荐

css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
html ＜table＞表格表头固定内容滚动代码拿去就能用
纯 html.css代码写的 table 表格先来看下pc端的效果图移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...
table中head表头固定，body滚动
转自:http://blog.csdn.net/hualele/article/details/52993315 <div style="width: 800px;"> ...
HTML table 表格 thead 表头固定，tbody 滚动
第一种方式实现第二种方式实现第一种方式实现使用 css 样式设置thead 和 tbody [ 推荐方式 ] #tableid>thead>tr{display: table;wid ...
纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...
bootstrap Table表头固定
简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表头固定 ...
table表头固定表体滚动
实际的项目中需要用到弹出框包含表格时,万一表格很长不方便显示,这时就需要滚动表格,那么怎么才能实现呢? 如下,是用纯css实现的滚动表格(但是firefox和360极速模式下存在兼容性问题,有待提高) ...
table 表头固定
一.table 表头固定说明.我们将表头和表内容分成两个表格就可以解决该问题. 二.代码. css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来. * {box-sizing: b ...

HTML table标签实现表头固定

HTML table标签实现表头固定

HTML table标签实现表头固定相关推荐

最新文章

热门文章