在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap 3,故也可以叫做bootstrap table。

需要实现的是:表格头部固定,并且支持水平滚动

html code(source table):

<table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover">
<thead>
<tr id="table_head">
<td>Test</td>
....
</tr>
</thead>
<tbody> </tbody>
</table>

stylesheet code:

#fixed_table #fix_head{
background: #FFFFFF;
box-shadow: 0px 0px 5px #888888;
}

JS代码按效果不同有一些不同

效果一 是浏览器滚动条滚动,头部固定:

效果二 内容内部滚动,固定表格头部。js,html是基于效果一,Html,js,css 代码相对效果一有增加。

附生成 codepen.io中table thead和tbody 内容的php code:

<?php
$count = 30; echo '<tr id="table_head">';
for($i=0;$i<$count;$i++){
echo "<td>Test{$i}</td>";
}
echo '</tr>'; echo "content trs---------------\r\n"; $content_count = 30;
for($i = 0; $i < $content_count;$i++){
echo '<tr>';
for($j = 0;$j < $count;$j++){
echo "<td>content".($i+1)."</td>";
}
echo '</tr>';
}

如果当前电脑没有PHP运行环境,可以百度: php代码在线运行 ,点击进入搜索结果列表的一个,然后将php代码复制进代码输入框中,运行之后应该就可以看到生成的有tr td 内容的字符串。

参考文档:

  1. css position:fixed时还能水平滚动,如何实现    实现了固定头部的水平滚动
  2. 网页制作中在头部固定悬浮table表头(thead)的方法  javascript 主要代码来源
  3. jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度  学习获取元素实际宽度
  4. firefox下table固定寬度 解决Firefox浏览器下table宽度不识别
  5. how to get innerWidth of an element in jquery WITHOUT scrollbar 效果二中,需要实现 滚定头部不遮住内容滚动条,所以需要设定宽度。笔者是按照回答得到思路,笔者偷懒直接加一个div,直接获取这个div的宽度,就获取内容区的宽度了。

bootstrap table 实现固定悬浮table 表头并可以水平滚动的更多相关文章

  1. 网页制作中在头部固定悬浮table表头(thead)的方法

    这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...

  2. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

  3. table表格固定前几列,其余的滚动

    我查了好多资料,只找到一个demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""h ...

  4. 多表头固定demo--html Table

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  6. bootstrap学习笔记<四>(table表格)

    表格 bootstrap为table表格定制多个常用样式:基本样式,隔行变色样式,带边框样式,荧光棒样式,紧凑样式,响应样式. ☑  .table:基础表格 ☑  .table-striped:斑马线 ...

  7. bootstrap表格固定表头,表格内容滚动条滚动显示

    直接贴代码--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. 5种做法实现table表格中的斜线表头效果

    table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...

  9. jasper使用table组件设计复杂的表头

    1.1 设计报表模板 1.1.1 新建模板DemoReport5.jrxml,去掉不需要的Band,保留Title,Page Header,Detail 1 , PageFooter.将组件Table ...

随机推荐

  1. Codeforces768B-Code For 1-类似线段树-枚举+单点更新or区间更新

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门  原题目描述在最下面.  每次把\(n\ ...

  2. 2. Vim 概念扫盲

    Frm: http://www.linuxidc.com/Linux/2013-05/84031p2.htm 了解Vim的三个基本模式 当我们安装完一个编辑器后,肯定会打开它,然后在里面输入点什么东西 ...

  3. 自动化测试工具2-testcomplete

    今天来说说testcomplete的使用 录了一个简单案例视频,网址如下:https://v.qq.com/x/page/f05116a062y.html 第一步是创建一个工程: 输入工程名,和选择工 ...

  4. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  5. Centos6.5离线安装gcc

    木有网的centos折腾起来简直费劲的不要不要的~ 学校的虚拟机最开始只安装了一个libgcc-4.4.7-4,然而这是不够用的,比如安装软件的时候,需要输入"./configure&quo ...

  6. "_CMTimeGetSeconds", referenced from:

    CMTime is defined in the CoreMedia.framework. Add that framework to your project.

  7. mysql的几种启动方式

    mysql的四种启动方式: 1.mysqld 启动mysql服务器:./mysqld --defaults-file=/etc/my.cnf --user=root 客户端连接: mysql --de ...

  8. sql (9) COUNT

    COUNT() 函数返回匹配指定条件的行数.语法SQL COUNT(column_name) 语法COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入):新建表 Stude ...

  9. Centos6 安装完之后,没有网络

    Virtualbox安装的centos 6.10的虚拟机,安装时,网络是NAT网络,安装完之后,将网络改为桥接网卡,启动虚拟机之后,使用 ifconfig 命令查看没有到eth0的信息,只有127.0 ...

  10. scala中Tuple简单使用

    /** * Tuple简单使用记录 * 最大22个参数 */ object TupleUse { def main(args: Array[String]): Unit = { // 简单Tuple ...