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,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...
随机推荐
- uboot启动参数
bootcmd=nand read.jffs2 0x30007FC0 kernel; bootm 0x30007FC0bootdelay=2baudrate=115200ethaddr=08:00:3 ...
- ASP.NET MVC下的四种验证编程方式【转】
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...
- Maven3.x 插件开发入门
Maven工具有很多插件,各种各样的插件,让我们开发调试过程中非常方便,但是终究是有你想要的但是现目前插件不能满足的(可能性非常非常低),这个时候就需要使用其他的替代工具,或者是自己来开发一个Mave ...
- 【JQGRID DOCUMENTATION】.学习笔记.2.基本表格
JqGrid的实例是一个JavaScript对象,带有属性,事件和方法.属性可以是字符串,数字,数组,布尔值或任何其他对象. 1 调用的约定: $("#grid_id").jqGr ...
- 每日一九度之 题目1039：Zero-complexity Transposition
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3372 解决:1392 题目描述: You are given a sequence of integer numbers. Zero-co ...
- 使用compile_scripts.php脚本，生成lua打包的zip，解决加密问题
@echo off set DIR=%~dp0 set TEMPLATE_ROOT=%DIR%.. echo %TEMPLATE_ROOT%\quick\bin\win32\php.exe echo ...
- C/C++ 调用qsort/sort 对字符数组排序的cmp函数写法
这个问题屡次碰到解决之后再次遇到又忘记怎么弄了,这次打算彻底搞清楚. ·C 首先对所谓字符数组的排序应该是对(char)*a[]数组而非(char)a[][]进行的排序,后者是无法直接调用qsort实 ...
- Java的Properties类和读取.properties文件
一..properties文件的作用 Properties属性文件在JAVA应用程序中是经常可以看得见的,也是特别重要的一类文件.它用来配置应用程序的一些信息,不过这些信息一般都是比较少的数据,没有必 ...
- 测可用！ecshop立即购买和加入购物车按钮共存的方法
网上方法很多,但都不能用的,有的是老版本的,有的方法本身就不完整. 应大多数客户要求,我们重新整理下教程,希望对大家有用. 亲测可用!ecshop立即购买和加入购物车按钮共存的方法 第一步:修改ecs ...
- php 本周开始时间和结束时间；本月开始时间结束时间；上月开始时间结束时间
<?php /** * 功能:取得给定日期所在周的开始日期和结束日期 * 参数:$gdate 日期,默认为当天,格式:YYYY-MM-DD * $first 一周以星期一还是星期天开始,0为星期 ...