html bootstrap 表头固定在顶部，表列可以自由滚动的效果

该效果主要是依照 bootstrap 的一个样式，class="navbar-fixed-top";

参考网址为：http://v3.bootcss.com/components/#navbar-fixed-top

贴上代码。

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript" src="js/jquery2.0.3.min.js"></script>

 <script type="text/javascript" src="js/bootstrap.min.js"></script>

 <link rel="stylesheet" href="css/bootstrap.min.css">

 <link rel="stylesheet" href="css/bootstrap-theme.min.css">

 <style>

 .table tr th,.table tr td{ width:25% !important;}

 </style>

 </head>

 <body>

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

   <div class="container">

    <table class="table  table-bordered" style="margin-top:9px;">

         <tr>

             <th>dksliesjfd</th>

             <th>dksliesjfd</th>

             <th>dksliesjfd</th>

             <th>dksliesjfd</th>

         </tr>

     </table>

   </div>

 </nav>

 <div class="container" style="margin-top:80px;">

  <table class="table table-bordered">

         <tr>

             <td>dksliesjfd dsdsdsliesjfd dsdsdssliesjfd dsdsdssliesjfd dsdsdssd</td>

             <td>时光深处，岁月静好.时光深处，岁月静好.时光深处，岁月静好.</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr><tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr><tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

         <tr>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

             <td>dksliesjfd</td>

         </tr>

     </table>

 </div>

 </body>

 </html>

还有一种方法，是 position:fixed; top:0;也是可以固定在顶部。

但是，bootstrap 可以自适应网页，简单快捷。

第二种方法：如下，给每个td,th设置宽度，这样便可以是表的布局样式相同

/* 增加表头固定，表内容 有滚动条 --start*/

  table thead{display: block;}

  table tbody{display: block; height: 300px; overflow: auto;}

  table thead tr th:nth-child(1){width: 107px;}

  table thead tr th:nth-child(2){width: 130px;}

  table thead tr th:nth-child(3){width: 152px;}

  table thead tr th:nth-child(4){width: 133px;}

  table thead tr th:nth-child(5){width: 142px;}

  table thead tr th:nth-child(6){width: 111px;}

  table thead tr th:nth-child(7){width: 212px;}

  table thead tr th:nth-child(8){width: 160px;}

  table tbody tr td:nth-child(1){width: 109px;}

  table tbody tr td:nth-child(2){width: 132px;}

  table tbody tr td:nth-child(3){width: 155px;}

  table tbody tr td:nth-child(4){width: 135px;}

  table tbody tr td:nth-child(5){width: 144px;}

  table tbody tr td:nth-child(6){width: 114px;}

  table tbody tr td:nth-child(7){width: 214px;}

  table tbody tr td:nth-child(8){width: 145px;}

html bootstrap 表头固定在顶部，表列可以自由滚动的效果的更多相关文章

实现html表头固定，表格内的信息向上滚动
效果如下: <!doctype html>Table header header two fuck 1 fuck 2 fuck 1 fuck 2 fuck 1 fuck 2 fuck 1 ...
bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
css手写一个表头固定
Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定主要 ...
纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
table表头固定问题
table表头固定问题原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
html css 如何将表头固定（转）
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
html Table实现表头固定
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...

随机推荐

php的ssh2扩展安装
折腾半天,结论如下: 1.先需要openssl 用which openssl看是否已安装 2.然后libssh2 用rpm -ql libssh2查看 3.下载源码的shh2x.x.x.tgz的包 4 ...
php中urlencode与rawurlencode的区别有那些呢
urlencode 函数: 返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+).此编码与 WWW 表单 POST 数据的编码 ...
微信公众平台消息接口API指南
简介微信公众平台消息接口为开发者提供了一种新的消息处理方式.微信公众平台消息接口为开发者提供与用户进行消息交互的能力.对于成功接入消息接口的微信公众账号,当用户发消息给公众号,微信公众平台服务器会使 ...
获取手机IMEI 号和 IP
没什么可说的,直接上代码: public class PhoneStateCodeUtils { /** * 获取手机imei串号 */ public static String getImei(Co ...
每日一九度之题目1016：火星A+B
时间限制:1 秒内存限制:32 兆特殊判题:否提交:5346 解决:1464 题目描述: 读入两个不超过25位的火星正整数A和B,计算A+B.需要注意的是:在火星上,整数不是单一进制的, ...
1014 C语言文法定义与C程序的推导过程程序：冒泡算法C程序（语法树）
阅读并理解提供给大家的C语言文法文件. 参考该文件写出一个自己好理解版的现实版的完整版的C语言文法. 给出一段C程序,画出用上述文法产生这段C程序的完整语法树. 程序:冒泡算法C程序点此文字查看原图 ...
Fishnet(暴力POJ 1408)
Fishnet Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 1911 Accepted: 1227 Descripti ...
WPF中两个窗口的互斥
这里所讲的互斥是两个窗口不同时存在,打开一,只显示一:点一相关按钮显示二,关闭一:关闭二,显示一. 窗口一: history winResult winChoice = new winResult() ...
mfc线程
1.生成线程方式1. HANDLE hthread; //线程句柄 hthread=CreateThread(NULL,0,(LPTHREAD_START_ROUTINE)threadFunc,NU ...
MySQL基础（三）——约束
MySQL基础(三)--约束约束是在表上强制执行的数据校验规则,主要用于维护表中数据的完整性以及当数据之间有以来关系时,保护相关的数据不会被删除. 根据约束对列的限制,可以划分为:单列约束(只约束一 ...

html bootstrap 表头固定在顶部，表列 可以自由滚动的效果

html bootstrap 表头固定在顶部，表列 可以自由滚动的效果的更多相关文章

随机推荐

热门专题

html bootstrap 表头固定在顶部，表列可以自由滚动的效果

html bootstrap 表头固定在顶部，表列可以自由滚动的效果的更多相关文章