完美tbody滚动效果

已于 2022-07-16 20:43:34 修改
阅读量872 收藏
点赞数
分类专栏： 小方法 HTML 文章标签： css html javascript
于 2022-01-08 12:59:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lenkty/article/details/122378921
版权

效果图：

 源码：

<!DOCTYPE html>
<html>

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .mytable{
            width: 800px;
            background-color: whitesmoke;
            /* 相邻边被合并 */
            border-collapse:collapse;
            border-spacing:0;
            margin:10px;
        }
        .mytable thead{
            background-color:gainsboro;
        }
        .mytable tbody {
            display: block;
            height: 400px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .mytable thead,.mytable tbody tr,.mytable tfoot tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            font-size: 16px;
            text-align: center;
            border-bottom: 1px solid gray;
        }
        .mytable thead {
            /* 预留滚动overflow-y的空间 */
            width: calc(100% - 1em);
            height: 30px;
        }
        .mytable td{
            border-left: 1px solid gray;
        }
        .mytable tfoot tr{
            border: none;
        }
        .mytable tfoot td{
            text-align: right;
            padding-right: 1em;
            border: none;
        }
        .mytable .index1{
            width: 50px;
        }
        .mytable .index2{
            width: 100px;
        }
    </style>
</head>

<body>
    <div style="width: 100%;">
        <table class="mytable" >
            <thead>
                <tr>
                    <td class="index1">序号</td>
                    <td class="index2">列1</td>
                    <td>列2</td>
                    <td>列3</td>
                    <td>列4</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列列列列列列列列列列</td>
                    <td>列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                </tr>
                <tr>
                    <td class="index1">1</td>
                    <td class="index2">列列列列列列列列列</td>
                    <td>列列列</td>
                    <td>列列列列列列</td>
                    <td>列列列列列列列列列列列列列列列列列列</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">共100条</td>
                </tr>
            </tfoot>
        </table>
    </div>
    
</body>

</html>


 

更多信息请查看 博客 或者关注公众号：Z技术

 

zow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 表格纵向滚动条,纯css实现table的表头固定tbody内容显示垂直滚动条
weixin_35937871的博客
06-03 2303
最近在做项目是经常用到table表格来做数据统计，数据少时还好，但是数据多就会导致整个页面看起来乱，用户体验不好，为了使得用户体验更好，所以就会为table的内容上显示滚动条，这样即使再多的数据也不怕因为过多导致页面显示难看。实现的方法有很多，这里列举几个比较好的整理下来，作为一个学习笔记，也为需要的小伙伴提供思路。首先要明确我们需要完成的效果：1.固定表头2.table垂直滚动条3.table列...
CSS设置table下tbody的滚动条的实现
09-22
主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
＜tbody＞出现滚动条后，同＜thead＞对不齐的解决方案
ElectronStorm的专栏
06-17 360
第四步，编写js，当表体.scrollHeight > 表体.clientHeight时，表明出现了滚动条，则为表头添加scroll-thead样式，同时为表格整体添加scroll-table样式。否则就为表头添加.no-scroll-thead样式，同时为表格整体添加no-scroll-table样式即可。如上处理后，表头和表体能对齐，但如果表体出现滚动条，两者就会对不齐了。第一步，将table和thead分别加上ref（refTable, refTHeader)需求是需要表格滚动，并且表头不动。
完美的图片不间断滚动效果
wmnmtm的专栏
02-29 190
&lt;html&gt; &lt;head&gt; &lt;title&gt;完美的图片不间断滚动效果&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 300px"&gt; &lt;TABLE cellSpac
bootstrap4添加滚动条
NullPE3351的博客
01-25 5016
web开发中常常需要添加表格或者列表元素，但是如果元素内容过多就会占用太大的页面空间，不方便排版，所以滚动条的添加很重要。 &lt;div class="col-md-6" style="margin: 0"&gt; &lt;!--&lt;div class="row pre...
antd-table 自定义实现排序滚动条与列拉伸
Dronwing fish
04-13 2977
ant-table 自定义实现排序滚动条与列拉伸列排序滚动条 由于项目需求，我使用了ant Degisn 的Table组件，随着需求的变化，在原有的表格上增加了列排序、滚动条、列拉伸以及固定列的功能（一万头XX在心中奔腾。。。）。刚开始听到需求时，我是不以为然的，毕竟ant都提供了对应的属性和方法嘛，不慌！。。。结果。。。脸都肿了。 只实现单一功能时，ant做的很完美，但是将这些功能集合到一起时，...
html响应式布局效果图,响应式网页布局的实现方法原理
weixin_39975261的博客
06-03 556
昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计？》，我觉的响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备(台式电脑，笔记本电脑，平板，手机)相关的设计问题。既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。交互设计师，要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到...
element表格的有滚动条时产生错位或者偏移
weixin_44168929的博客
05-16 4554
网上有很多的方法、但是始终对我没作用，怀疑遭到了针对、但是解决方法找到了 如下： /* 修改element表头错位的问题 */ .el-table--border th.gutter:last-of-type { display: block !important; width: 17px !important; } 这个css完美解决了我的问题、再也没有烦恼了 此外再赠送一个改变滚动条样式的方法 /* 修改滚动条的样式 */ ::-webkit-scrollbar { width:
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Demon丶冷漠
11-23 1869
        最近在做一个项目，由于列表比较长，产生了纵向滚动条，这个时候拖动导致一些重要的信息就会看不到，很不方便。这个时候如果能给这几列重要的信息固定住，只拖动后面的列就显得格外重要了，我在网上也看了很多的例子，都不是很符合，最后自己尝试出了方法。测试过兼容的浏览器有谷歌，火狐，IE11！其他的浏览器没做过测试，各位自己看吧！好了，话不多说，效果如下图所示：   直接看代码吧！需要注...
vue使用element el-table实现动态表头数据表、并滚动展示列表
Smile yourlife
08-24 1856
#vue使用el-table，实现动态数据表、并滚动展示 ###tableLabel表头数据，支持条数、宽度设置 ###tableData存放所有数据， ###showList存放用于展示的数据， ###使用setInterval定时更新showList(删除第一条，末尾添加一条） ###并通过vue computed实时更新渲染数据，实现滚动效果 ###style 取消滚动条 #代码如下： <template> <div class="tbDynam"> <el-
vue-seamless-scroll实现列表无缝滚动
qq_34448522的博客
02-19 3867
一个简单的无缝滚动，最近折磨了我好久，记录一下。 先上一下最终实现效果： 最开始html标签用的table、thead、tbody然后结合animate和settimeout实现的，但是实现之后每次滚动都抖一下，也找不到原因；后来寻思是不是table的原因，于是换成div试了一下，原来的问题解决了但是出现了新问题：滚动不流畅，就像网速不好似的。。。于是，我又换成了现在的vue-seamless-...
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
要实现表头固定和tbody滚动的效果，我们需要对CSS进行一些定制。主要涉及以下几点： 1. **表头固定**：为`<thead>`添加`position: sticky;`和`top: 0;`属性，使其在滚动时保持在屏幕顶部。例如： ```css table....
用css给tbody加垂直滚动条的具体思路及样式代码
09-22
给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可，下面有个不错的示例，大家可以参考下
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1567
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS：图片间空白间距问题的解决方案
q1003675852的博客
08-02 804
本文主要记录CSS：图片间空白间距问题的解决方案，特别是针对iphone 14 pro设备的新情况进行测试处理。
原神自定义倒计时
最新发布
lulei5153的博客
08-04 769
【代码】原神自定义倒计时。
thead固定 tbody滚动
05-26
实现thead固定，tbody滚动的方式可以通过以下步骤： 1. 给tbody设置固定高度和overflow-y属性为scroll，使得tbody可以滚动。 2. 将thead的样式设置为position:fixed，使得它可以固定在表格顶部。 3. 给tbody中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值