tbody加滚动条⋯⋯转自博客园

最新推荐文章于 2023-12-12 15:23:32 发布
最新推荐文章于 2023-12-12 15:23:32 发布
阅读量124 收藏
点赞数
分类专栏： web前端 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dufei330/article/details/84235130
版权

 

<!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>

 

dufei330
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tbody 滚动条设置
weixin_34221036的博客
11-29 4593
文章介绍了如何将滚动条设置在tbody标签上，并且表格整体和未设置滚动条一致；此外补充了一些table的冷门姿势。 How to set tbody height with overflow scroll 问题demo 解决问题demo 要想给tbody一个超出的滚动条，其实只需要给tbody设置一个固定height，以及overflow:auto也就是超出添加滚动条。但是table固有的disp...
用css 给tbody加垂直滚动条
BetterBOB的专栏
02-08 2万+
思路就是 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度 width:200px 代码如下：
如何实现table表头固定但是tbody可以滚动【附源码实例】
赏樱看雪撸代码
12-06 3345
table表头固定，自定义tbody高度，tbody设置高度失效，tbody设置高度不生效，tr设置高度，tbody滚动条
table给tbody设置滚动条
qq_37866866的博客
06-12 1430
代码如下：(数据DeviceList、funcName等字段可直接删除，只是做多数据的展示，根据自己的数据进行修改)将table的thead和tbody分成两个table，并将tbody的table用div包起来。用得最多，也比较好的方案。
table表格的thead固定，tbody展示出滚动条
最新发布
m0_66226018的博客
12-12 1449
我也是做了两次的table表格的thead固定，tbody展示出滚动条，第一次因为是存在有表头合并的原因没有做出来完好的效果，第二次是不仅有表头的合并，还有tbody中的rowspan的合并。
自定义滚动条、tbody加滚动条
你的小可爱的博客~
08-23 1228
tbody加滚动条，自定义滚动条
Html table 滚动条
小虎博客
07-04 1113
<table style="width: 100%; border-collapse: collapse; border-color: rgb(211, 214, 219); color: black;"><thead style="background-color: rgb(248, 248, 248);"><tr style="border-color: rgb(211, 214, 219);"><th style="width: 30px; text-alig
CSS设置table下tbody的滚动条的实现
09-22
主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用css给tbody加垂直滚动条的具体思路及样式代码
09-22
给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可，下面有个不错的示例，大家可以参考下
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
09-30
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。
css实现table表头固定，主体tbody部分出现滚动条
笑到世界都狼狈的博客
04-02 2756
首先，这是原文链接：https://www.mybj123.com/667.html，作者也写的比较好，但是我在原文的基础上，也发挥了一下自己的头脑，做了一点补充。 下面是我结合作者的代码做了一些修改的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
原生table标签在tbody添加滚动条
SmallGirlYang的博客
11-27 1103
js 动态创建表格数据。
tbody超长显示滚动条
Knight_Key的博客
01-18 1677
头文件加样式 <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1...
前端学习（205）:animation动画库
歌谣的博客
12-24 408
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
通过css样式给表格tbody加垂直滚动条
weixin_30321709的博客
08-21 844
tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-...
如何设置table的tbody高度,超出默认高度会出现滚动条!!!
热门推荐
wushiqinwu的博客
04-05 3万+
需求：标题栏固定，tbody里的内容滑动；   解决方案：用的是两个div内套了两个table，一个放thead,一个放thead,看起来像是一个table。padding-right:17px是指滚动条的宽度  代码如下： 标题 选择 模板名称 模板类型 创建时间 参数说明 tbody部分              
tbody加滚动条
05-26
如果你想让一个 `<tbody>` 元素拥有滚动条，可以将其包裹在一个 `<div>` 元素中，并为该 `<div>` 元素添加样式 `overflow: auto`。 例如： ```html ;"> <th>Header 1 <th>Header 2 <th>Header 3 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值