头部固定的table

最新推荐文章于 2024-10-07 09:24:46 发布
最新推荐文章于 2024-10-07 09:24:46 发布
阅读量132 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/vzane/p/6217861.html
版权 
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>头部固定table</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width"/>

        <style>
            div,
            table{
                margin:0;
                padding:0;
            }
            table{
                border-collapse:collapse;
                border-spacing:0;
            }
            .m-tb-fit{
                position: relative;
                table-layout: fixed;
                line-height: 1.5;
            }
            .m-tb-fit th,
            .m-tb-fit td{
                padding: 5px;
                border: 1px solid #ddd;
            }
            .g-w600{
                width: 600px;
            }
            .g-tb-fit{
                width: 300px;
                height: 500px;
                overflow: hidden;
            }
            .g-tb-fit .g-tb-cont{
                position: relative;
                top: -1px;
                overflow: auto;
                height: 200px;
            }
        </style>

    </head>
    <body>

        <div class="g-tb-fit">
            <table class="m-tb-fit hd g-w600">
                <thead>
                    <tr>
                        <th width="90">1</th>
                        <th width="90">22</th>
                        <th width="90">333</th>
                        <th width="90">4444</th>
                        <th width="90">55555</th>
                        <th>666666</th>
                    </tr>
                </thead>
            </table>
            <div class="g-tb-cont">
                <table class="m-tb-fit g-w600">
                    <tbody>
                        <tr>
                            <td width="90">111111</td>
                            <td width="90">22222</td>
                            <td width="90">3333</td>
                            <td width="90">444</td>
                            <td width="90">55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            function tabFitScroll(box, hd, cont) {
                var _tb_box = box,
                        _tb_hd = hd,
                        _tb_cont = cont;
                $(_tb_box + ' ' + _tb_cont).scroll(function () {
                    var $t = $(this);
                    $(_tb_box + ' ' + _tb_hd).css('left', -$t.scrollLeft());
                });
            }
            $(function () {
                tabFitScroll('.g-tb-fit', '.m-tb-fit.hd', '.g-tb-cont');
            });
        </script>
    </body>
</html>

　　

转载于:https://www.cnblogs.com/vzane/p/6217861.html

ao0695900062162430
关注
table固定头部，表格tbody可上下左右滑动
淡水无华的博客
11-03 1万+
纯css实现表头固定
element table固定头部兼容ie的滚动条样式自定义
04-09
element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的...
网页制作中在头部固定悬浮table表头(thead)的方法
weixin_30674525的博客
06-12 1441
这两天接了一个需求，页面是这样的 然后需求是页面中的这个表格当页面向上滚动，且表格的表头到达窗口上方时，表头悬浮在页面的上方，表格正常滚动，这样表格内的数据可以随时看到表头内容。 一开始我认为这是极简单的，就当页面滚动，判断表头到窗口的距离，当=0的时候触发事件然后让表头position:fixed不就万事大吉了吗？于是我对漂亮又萌萌哒的产品妹子说，放心吧，这个简单的很一会就能完事，当时我...
table实现头部固定，内容滚动效果
高振的博客
04-02 5959
设置tbody滚动，并固定头部，最需要解决问题是对齐问题，实现在两个方面：1、thead和tbody自动化对齐。2、把滚轮的宽度预留出来。具体代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>&l...
表头固定研究(一个table)
ruanhongbiao的专栏
03-09 423
最近在项目中遇到需要固定表头的需求，虽然网上有很多种方法，但大部分是要写两个table的，而我们现有的项目不想在jsp页面里增加代码或者html结构，最后在试了很多方法后使用css3的transform解决了这个问题，现在把解决这个问题的思路和过程及代码贴出来，欢迎大家斧正。$(function(){    var scrollTop;  var frameWidow = window.paren...
table表头固定(一个table）
sca98655的博客
03-09 327
 http://www.w3.org/TR/html4/loose.dtd">              Document    div{  overflow: auto;  width: 100%;  }  table{  margin:0 auto;  border-collapse: collapse;  border: none;  }  t
关于table表格头部固定和列固定的方式
b0303的博客
01-20 3289
无论你用什么框架都要用到table固定列或者表头的现象。最近用到了，写个demo以备后面用，顺便分享一下，提供给徐亚的人。 下面是代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>表格第一行和前几列固定</title&...
table 固定显示顶部
czh4869623的专栏
08-01 195
css实现table 固定显示顶部
table 表头固定
github_38186390的博客
09-27 2008
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。 二。代码。 css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。 * { box-sizing: border-box; } .table { border: 1px solid #efefef; ...
table 头部固定
weixin_30363509的博客
06-27 104
.table { height: 310px; } table tbody { display: block; max-height: 270px; overflow-y: auto; } table thead, tbody tr { ...
JQ固定table头部的插件.zip_Table_自己编写jq固定表格头部插件
09-20
标题中的"JQ固定table头部的插件"指的是使用jQuery库来创建一个功能，使得在用户滚动页面时，表格的头部始终保持可见。描述中的“固定表格头部的插件很实用的一款轻便的插件”暗示了这个插件具有轻量级和实用性，...
jquery插件table表格头部和左侧固定
09-29
大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <th><div>标题一</div></th> <th><div>...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
总之，要实现bootstrap-table的表头和列固定功能，核心在于引入正确的库文件，并且使用bootstrap-table提供的API以及固定列所需的配置项。在实际应用过程中，可能会遇到各种问题，比如兼容性问题、样式错位等，需要...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 1016
Vue 2 中使用 Vue I18n 插件实现中英文切换
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1050
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue根实例、实例总结
m0_54007573的博客
10-04 517
Vue根实例、实例总结
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 489
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 599
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
table 头部固定，
05-31
要实现表格头部固定的效果，可以借助CSS中的position和z-index属性以及HTML中的表格结构来实现。具体的实现步骤如下： 1. 在HTML中，将表格按照固定头部和滚动内容的方式进行分割。可以使用thead和tbody标签来实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值