html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例

本篇文章小编给大家分享一下html中table固定头部表格tbody可上下左右滑动代码实例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下：

html代码：

标题一

标题二

标题三

标题标题标题标题标题标题标题标题标题四

标题标题标题标题标题标题标题标题标题五

标题标题标题标题标题标题标题标题标题六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

信息一

信息二

信息三

信息信息信息信息信息信息信息信息信息四

信息信息信息信息信息信息信息信息信息五

信息信息信息信息信息信息信息信息信息六

css样式：

.table_box_big {

overflow-x: scroll;

overflow-y: hidden;

position: relative;

height: 350px;

}

.table_box {

overflow: hidden;

position: absolute;

}

.table_tbody_box {

height: 300px;

overflow: scroll;

}

table {

border: 1px solid #eeeeee;

}

table thead tr th {

width: 80px;

height: 50px;

border-right: 1px solid #eeeeee;

text-align: center;

word-break: keep-all;

padding: 2px 10px;

background: skyblue;

}

table tbody tr td {

width: 80px;

height: 50px;

border-right: 1px solid #eeeeee;

text-align: center;

border-bottom: 1px solid #eeeeee;

word-break: keep-all;

padding: 2px 10px;

}

实现效果如下：

html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例相关推荐

HTML网页中table居中和表格内容居中
HTML网页中table居中和表格内容居中 1.html中让表格在浏览器中左右居中,可以设置表格的align属性 align三个属性: 居中:center:靠左:left:靠右:right. 2.在表 ...
html 使table 页面居中,HTML网页中table居中和表格内容居中
HTML网页中table居中和表格内容居中 1.html中让表格在浏览器中左右居中,可以设置表格的align属性 align三个属性: 居中:center:靠左:left:靠右:right. 2.在表 ...
java实现分发_关于JAVA中事件分发和监听机制实现的代码实例
[实例简介] 关于JAVA中事件分发和监听机制实现的代码实例,绝对实用代码,有说明. [实例截图] [核心代码] JavaEventDispatch ├── bin │ └── com │ └ ...
关于JAVA中事件分发和监听机制实现的代码实例-绝对原创实用
转载:http://blog.csdn.net/5iasp/article/details/37054171 谢谢博主 ======================================== ...
使用 iReport中table组件制作表格导出PDF
一.iReport安装 1.下载安装包: 2.直接按默认安装完成. 3.安装完成后iReport还不能启动,会闪退,请继续下面的操作 4.下载jdk_1.7并安装.注意:不需要配置jdk_1.7版本的 ...
layui设置表格表头字体_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例

html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例相关推荐

最新文章

热门文章