table固定表头，但数据滚动

最新推荐文章于 2024-09-20 01:18:54 发布
最新推荐文章于 2024-09-20 01:18:54 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： css实例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>表头固定实例</title>

    <!-- Bootstrap -->
    <link href="../js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/lib/jquery-3.3.1.js"></script>
    <script src="../js/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">

        table tbody {
            display: block;
            height: 350px;
            overflow-y: scroll;
        }

        table thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        table thead {
            width: calc(100% - 17px)
        }


    </style>

</head>
<body>
<div id="aa" style="width: 800px; height: 450px; margin-left: 200px; border: dashed 1px;margin-top: 50px;">
    <div style="width: 700px; height: 400px; margin-left: 50px;margin-top: 20px; border: dotted 1px;">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>作者</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>
                <tr>
                    <td>傲慢与偏见</td>
                    <td>简·奥斯汀</td>
                    <td>一部爱情片....</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>
</body>
</html>

效果截图:

这里写图片描述

重生之我是一名程序员
关注
专栏目录
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
table固定表头滚动
weixin_34245169的博客
03-15 173
一、table固定表头滚动（不兼容IE）使用scrollTop监听滚动 如下例 1、html <div class="tabflow" id="flowtable-cont"> <table> <thead><tr><th>年度</th><th>起降架次(万架)&...
vxe-table固定表头同时不显示滚动条，粘性定位sticky
最新发布
m0_56309928的博客
09-20 314
思路就是给表头的th加粘性定位，同时要一个一个的排查它的父元素有没有overflow：hidden，要改成visible，但是研究了很久都不生效。想要表头固定同时表格还不能有滚动条，所以用vxe-table自带的固定表头无法实现，所以考虑使用css的粘性定位实现。
table表头固定，内容滚动
weixin_44037153的博客
04-14 4358
第一种方法通过overflow属性实现，第二种方法通过position属性实现。
JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
李二狗的博客
10-25 1万+
先看一张效果图 思路： 1、头部用一个table并用一个div包裹着， 表格的具体内容用一个table 2、头部外面的div用positon: relative相对定位 3、获取整个表格的高度 4、获取表格的dom（或者包裹着表格的dom）距离页面顶部的距离 offsetTop 5、滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动
JS实现table表格固定表头且表头随横向滚动而滚动
11-30
先看一张效果图 思路： 1、头部用一个table并用一个div包裹着， 表格的具体内容用一个table 2、头部外面的div用positon: relative相对定位 3、获取整个表格的高度 4、获取表格的dom（或者包裹着表格的dom）距离页面顶部的距离 offsetTop 5、滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动 当然还有很多可以优化的地方 我只是展示一个小思路 嘿嘿嘿 题外话 为啥用红色表头 因为显眼哇 哈哈 JS代码 /** * 最重要的一点是头和身体是两个table 然后定位用relative 然
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
本篇文章主要探讨如何利用纯CSS实现table固定列与表头，同时在中间部分添加横向滚动条，以确保用户体验。 首先，我们面临的问题是表格内容因列数过多而产生换行，这影响了视觉效果。为了解决这个问题，可以使用CSS...
html Table 表头固定的实现
09-22
为解决这个问题，就需要实现一个固定表头的效果，即无论表格如何滚动，表头始终固定在页面的顶部。 要实现这个效果，有几种常用的方法，主要包括使用CSS定位和JavaScript。而根据提供的文件内容，本文介绍了一种...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
7. 如果需要固定表头，可以在data-toggle="table"属性的基础上，设置data-height属性定义表格的高度，便于在表头固定时能够让表格数据部分滚动。 8. 如果在初次加载页面时发现表头和表格数据不对齐的问题，可能需要...
table表头固定只让内容滚动
Andrew_Chenwq的博客
03-08 819
position:sticky 用法：默认情况下，其表现为relative，在视窗与设置了该属性的元素之间，达到或超过其预设的 top、bottom、left、right，本属性会转变成 fixed，使 sticky 固定。纯css实现表头固定，只tbody滚动 需要用到粘性固定属性 – position:sticky。css是最关键的，需要分别对table自身和其父便签设置样式。html结构：table外面需要包一层div。
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
解决layui表格的表头不滚动的问题
10-16
今天小编就为大家分享一篇解决layui表格的表头不滚动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
asp网页表头固定解决
12-11
整合了一个Gridview表头固定，里面有例子
bootstrap的table表头固定tbody滚动
热门推荐
Cool的博客
04-11 4万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" href="css/bootstra
实现表格表头固定，横纵向滚动正常
weixin_30885111的博客
10-29 377
前几天，部门的老大叫我解决项目的两个历史遗留功能点，其中一个就是要实现表头固定，横纵向滚动无影响 实现点：建立一个表格，滚动的时候表头始终显示在可视区域的上方，横向滚动时正常 难点1--要让表格在纵向滚动的时候不随滚动条滚动 难点2--要让表格在横向滚动的时候正常滚动 只是难点1的话其实有很多个解决方案，这里暂列两个，第2个可解决难点1和难点2 第一个解决方案，使用两个table，表头单...
Bootstrap表格中，thead固定，tbody有垂直滚动条
weixin_34087307的博客
06-20 3772
1、html源码：这里的table是使用的vue写法，实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"> <table class="table table-condensed no-margin"> <thead> <tr> ...
js实现表头固定
javaStudentZhang的博客
06-10 7063
思路：一、table用div包裹，设置div的高度和滚动条，二、克隆table的表头，添加到div中，设为浮动，三、表头的top是滚动条的上方距离&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&amp
一种局部固定表头的实现方案（横向可跟随内容一同滚动，纵向锁定表头）
weixin_34408624的博客
12-05 723
1.为了固定表头我们需要先把表格的head和tbody切分到两个table里： <table class="table-head"></table>和 <table class="table-body"></table>里。 2.将table-body放在一个table-body-box的d...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值