<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
var table = $('table.scrolltable').each(function(){
var $table = $(this).css('border-collapse','collapse');
var $tbody = $table.find('tbody').eq(0);
var sbPosition = {left: $tbody.position().left + $tbody.outerWidth(), top: $tbody.position().top };
var $scrollbar = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-y':'auto',left:sbPosition.left, top:sbPosition.top, height:'0px',width:'20px'})
.append($('<div/>'))
.appendTo($table.parent());
$table.bind('rownum',function(event, newRowNum){
//先设置显示的行
var nFirst = parseInt($tbody.attr('itemIndex') || '0');
$tbody.find('tr').hide();
$tbody.find('tr').each(function(i){
if( i >= nFirst && i < nFirst + newRowNum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
var scrollHeight = $tbody.find('tr').length * $tbody.height() / newRowNum;
var $sb = $scrollbar;
$sb.css('height',$tbody.height());
$sb.find('div').eq(0).css('height',scrollHeight);
});
$scrollbar.scroll(function(){
$sb = $(this);
var nNewIndex = Math.floor($sb.scrollTop() / $sb.attr('scrollHeight') * $tbody.find('tr').length);
var nIndex = parseInt($tbody.attr('itemIndex') || '0');
var rownum = parseInt($table.attr('rownum') || '10');
if(nIndex != nNewIndex)
{
$tbody.find('tr').each(function(i){
if(i >= nNewIndex && i < nNewIndex + rownum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
$tbody.attr('itemIndex', nNewIndex);
}
});
$table.trigger('rownum',parseInt($table.attr('rownum')));
});
});
</script>
<style type="text/css">
.scrollbar
{
border:solid 1px red;
}
.scrolltable
{
}
</style>
</head>
<body>
<table class="scrolltable" border="1" rownum="10">
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
<th>eee</th>
<th>fff</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr>
</tbody>
<tfoot>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tfoot>
</table>
</body>
</html>
分享到：
相关推荐
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。
主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可，下面有个不错的示例，大家可以参考下
jquery+bootstrap 控制table中的th在浏览器滚动条滚动时,一直显示在tbody的上方 这只是一个页面的content部分,header & footer并未添加 1.实际页面中,需要加上header的高度; 2.通过offset()获取th这一行所处的位置,...
bootstrap框架下制作一个横向整表（thead和tbody）滚动和纵向表内容（thead不动，tbody滚动）滚动的表格。
纯CSS实现的表格滚动条效果，非常美观和实用。代码简短清晰。
本文给大家分享一段关于BootStrap的table表头固定tbody滚动的实例代码,代码简单易懂，需要的朋友可以参考下
bootstrap-table头部错位已完美解决，兼容ie，火狐，谷歌浏览器（其它的浏览器没测），耗费了半个月的脑细胞终于解决，喜欢的朋友请点个赞，谢谢！
还有人很变态地用这三个标签做出标题能跟随表格，或者tbody固定高度，走出自动出现滚动条的功能。 复制代码代码如下:<title>thead、tfoot 以及 tbody标签</title> ”1″> <thead> <tr> 科目</th> 分数...
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。 表格的分组显示(Structured Table) （IExplore Only） 一、按行分组 <thead> … </thead> – 表的题头(Header) <tbody> … </tbody> – 表的正文(Body) ...
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...
表格的分组显示(Structured Table) （IExplore Only） 1）按行分组 <thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer) 例： <table> <thead
function addMessage(messageID,userName,userCreateDate,articleCount,subject,body,creationDate,modifiedDate) { var br; var row = document.createElement("tr"); var cell = document....
runcode 123 123 123 123 123 123 123 123 123 123 ...删除表格的第一个tbody（这个表格只有俩tbody，所以这个按钮只能按两次……） [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]