html中table固定头部表格tbody可上下左右滑动_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

可以下载一个supertable的JS-jquery组件看看.原理是把一个table拆成四个div,简单说就是把滚动的部分悬停固定部分之上.比如克隆一个表头出来(DIV),然后设置全表的那个DIV上移一个表头高度,这样滚动表体而表头不动.左右的原理一样.自己也可以写,不过需要计算好几个DIV的运动关系www.zgxue.com防采集请勿采集本网。

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

<div style="overflow-y: auto; overflow-x: visible; width: 500px; height: 430px; text-align: center"> <table> <tr class="float_header" align="cen

html代码:

IE8,FF)其它的先不管 1.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加 你没写。2.就是你写了,但是宽度没用绝对宽度:而是用一个相对的宽度,想局中,必须用绝

<div class="table_box_big"><div class="table_box"> <table> <thead> <tr> <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th><div>标题标题标题标题标题标题标题标题标题四</div></th> <th><div>标题标题标题标题标题标题标题标题标题五</div></th> <th><div>标题标题标题标题标题标题标题标题标题六</div></th> </tr> </thead> </table> <div class="table_tbody_box"> <table> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> </table> </div></div>

做一个大表格,把你的页面内容放在这个大表格里,然后让这个表格居中显示就行。 <body> <div align=center> <center> <table width=100%> <tr> <td

css样式:

比如你第一行和第一列都不想动,就在B2处点击鼠标,选择窗口--冻结窗格 即可。光第一行不动,第一列想动的,就点在B1处,冻结窗口。

.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;}

中的一些招数,或者类似于偏方的技巧 here 这里 hand 手 hidden 被隐藏 head 头部 hom 标记 T table 表格title 标题 td 单元格的HTML 标记 top 顶部 text 文本 tr 表格中“行”的H

实现效果如下:

 这里是内容  这里是内容容这里是内容  </div>  </div>  </td>  </tr></table>  </body>  </html&

到此这篇关于html中table固定头部表格tbody可上下左右滑动的文章就介绍到这了,更多相关html中table固定头部内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

不是说把所有的像素都换成百分比就可以了 如果是图片,可以用百分比控制他的大小,如在属性中加入width=x% 文字部分可以用DIV或者TABLE来控制他在不同大小的浏览器中

两个表格,一个只显示表头,下面的div显示内容表格,div设置滚动条内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html table 表头固定的实现
  • 利用纯css实现table固定列与表头中间横向滚动的思路和实例
  • html css 控制div或者table等固定在指定位置的实现方法
  • 固定 table宽度 table-layout: fixed
  • 两个table实现固定表头拖动时仅限表体移动
  • 设置table中的宽度不随文字改变让其固定
  • 固定table第一行或某几行不随滚动条滚动而滚动
  • html固定标题列、标题头table具体实现代码
  • css固定table表头的实现代码可同时看到表头和表格底部
  • table的thead固定不动,通过scroll能控制显示tbody中的信息
  • HTML或JS代码如何实现让一个table的表头不动,body可以自由...
  • 在html中怎样控制表格的宽度
  • html css将表头固定的最直接的方法
  • HTML,怎么使第一列,不随着滚动条滚动而滚动,固定第一列不管...
  • 有关 TABLE-LAYOUT: fixed; 在ie6和ie8的问题
  • html页面怎么做到始终显示居中和固定大小;
  • 如何让部分表格固定不动呢
  • 求HTML5中最基础的英文单词和翻译。
  • 巧用CSS来控制div自适应浏览器的高度
  • 怎么让html页面随着浏览器的最大化和还原而改变大小?
  • jsp页面表头锁定的问题
  • css Div在页面中纵向固定,不随滚动条滚动,横向随滚动条滚动
  • 用jquery实现表格列排序?
  • 如何调整一个调用的html页面在iframe中的位置?
  • html导航栏怎么置顶啊?
  • DIV+CSS两列,左列宽度自适应右列固定
  • 怎么让导航条不随滚动条动
  • 几个不常用的HTML标记使用方法
  • 怎么使DW8中制作的网页随不同电脑分辨率放大缩小,不会留空...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtmlhtmltable固定头部html table 表头固定的实现利用纯css实现table固定列与表头中间横向滚动的思路和实例html css 控制div或者table等固定在指定位置的实现方法固定 table宽度 table-layout: fixed两个table实现固定表头拖动时仅限表体移动设置table中的宽度不随文字改变让其固定固定table第一行或某几行不随滚动条滚动而滚动html固定标题列、标题头table具体实现代码css固定table表头的实现代码可同时看到表头和表格底部html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html中table固定头部表格tbody可上下左右滑动html中div嵌套div的margin不起作用的解决方法html中把多余文字转化为省略号的实现方法方法html中input提示文字样式修改的示例代码详解html中表格table的行列合并问题解决layui表格选中指定行的radio单选框并滚动到该行的实现利用div+css3实现一个背景渐变的button按钮的示例代码quill编辑器插入自定义html记录的示例详解html 实现tab切换的示例代码html+css相对宽度和绝对宽度冲突时的div解决方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved