Table固定标题 内容滚动

最新推荐文章于 2023-04-14 13:34:06 发布
最新推荐文章于 2023-04-14 13:34:06 发布
阅读量826 收藏
点赞数
分类专栏： 前端

如下代码



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row"style="height:100px;"></div>
    <div class="row ">
        <div class="col-md-2 "></div>
        <div class="col-md-8 ">
            <div class="panel panel-info">
                <div class="panel panel-heading">
                    接受到的信息
                </div>
            <div class="panel-body">
                <div class="bs-example" data-example-id="contextual-table">
            <table class="table table-bordered" id="table-case">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                    <th>邮编</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="background: blue">Tanmay</td>
                    <td style="background: blue">Bangalore</td>
                    <td style="background: blue">560001</td>
                </tr>
                <tr>
                    <td style="background: #bd0a01">Sachin</td>
                    <td style="background: #bd0a01">Mumbai</td>
                    <td style="background: #bd0a01">400003</td>
                </tr>
                <tr>
                    <td style="background: lime">Uma</td>
                    <td style="background: lime">Pune</td>
                    <td style="background: lime">411027</td>
                </tr>
                <tr>
                    <td style="background: lightslategrey">xushicheng</td>
                    <td style="background: lightslategrey">BUNP</td>
                    <td style="background: lightslategrey">123456</td>
                </tr>
                <tr>
                    <td style="background: yellow">xussegeng</td>
                    <td style="background: yellow">BdfP</td>
                    <td style="background: yellow">885856</td>
                </tr>
                <tr>
                    <td style="background: palegreen">adfeng</td>
                    <td style="background: palegreen">upNP</td>
                    <td style="background: palegreen">485556</td>
                </tr>
                </tbody>
            </table>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-2 "></div>
<script>
    $(function(){
        var text=$("tbody:first");//定义第一个tr内容
        var clear;//定义需要清除动画的部分
        text.hover(function(){
            clearInterval(clear);//鼠标悬停，清除动画，停止滚动
        },function(){
            clear=setInterval(function(){
                var field=text.find("tr:first");//获取第一个tr内容 一个格一个格滚动
                // var field = text.find("tr").slice(0, 3);//获取前3行内容 3个格3个格滚动
                var high=field.height();//获取需要滚动的高度
                text.animate({ marginTop:-high+"px"},600,function(){//隐藏第一行
                    field.css("marginTop",0).appendTo(text);//将该行的margin值置零,然后插入到最后
                    text.css("marginTop",0);
                })
            },1000)//滚动间隔时间
        }).trigger("mouseleave");//自动滚动
    });
</script>
</body>
</html>

 

qingkaqingka
关注
专栏目录
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
table头部固定，内容滚动
weixin_33921089的博客
04-28 353
可以设置两个table,th,td得设置宽度： <table> <thead> <tr><th></th></tr> </thead> </table> <div style="max-height:500px;over...
table表头固定，内容滚动
最新发布
weixin_44037153的博客
04-14 4189
第一种方法通过overflow属性实现，第二种方法通过position属性实现。
Table固定指定列进行横向滚动(可拓展)
05-29
标题“Table固定指定列进行横向滚动(可拓展)”就描述了这样一个解决方案。 在这个解决方案中，我们有两个关键文件：`Index.html` 和 `Index.js`。`Index.html` 是页面的结构，它包含了一个表格元素，并且可能已经...
固定Table第一行或某几行不随滚动条滚动而滚动
09-25
在网页设计中，有时我们需要创建一个表格（Table）并实现特定的效果，比如固定表头（Table Header）或者固定前几行，在用户滚动页面时，这些行始终保持可见。这种效果能够帮助用户在大量数据中更容易地定位和理解...
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
Table实现表头固定 内容滚动
weixin_30510153的博客
11-26 288
<div style="width: 800px;"> <div class="table-head"> <table> <colgroup> <col style="width: 80px;" /> <col /> ...
TABLE滚动条
03-17
NULL 博文链接：https://sxpyrgz.iteye.com/blog/466492
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
table和标题连带滚动
qq_39653526的博客
08-02 166
##记录下学习历程 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="Refresh" content="60"> --> <title>分页Table</title> <script...
table滚动
harboryg的专栏
02-23 195
无标题文档             1               2               3               4               5               6               7               8               9
table表头固定，表格数据内容滚动
工作中学习，学习中进步
02-18 731
目的：方便运营人员查看第二屏的数据，能直观的查看数据对应关系 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table表头固定</title> <style> table{ border-collapse: collapse; bord
HTML如何给table添加滚动条
lchina1314的专栏
04-08 4113
要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示： &lt;!--div比table大小要小才会显示--&gt; &lt;div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"&gt; &lt;table i...
table表格固定表头，内容滚动显示
gyueh的博客
03-16 1641
目的：做一个table表格，实现固定标题行而内容可滚动 html部分代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href...
table列表滚动
qq_38187583的博客
03-13 2400
css &lt;style&gt; * { margin: 0; padding: 0;} .myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: auto;} table tr.even{ ...
原生table表头固定，内容滚动
weixin_45735694的博客
02-17 974
HTML： <div style="width: 1200px;margin: 0 auto;"> <div class="table-head"> <table> <colgroup> <col style="width: 100px;" /> <col />
HTML固定标题列与标题头table实现教程及代码示例
这篇文档提供了使用HTML和CSS来创建一个具有固定标题列和滚动内容的表格的方法，适合希望优化网页布局的开发者参考。通过理解和应用这些代码和技巧，读者可以更好地控制网页中的表格展示，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值