CSS实现表格无缝滚动

最新推荐文章于 2024-06-03 09:07:55 发布
最新推荐文章于 2024-06-03 09:07:55 发布
阅读量1k 收藏
点赞数 1
文章标签： css html animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44862918/article/details/106913284
版权

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .main_1 {
            /*border: 2px solid pink;*/
            /*background: black;*/
            margin-top: 30px;
        }
        .main_1 table {
            border-collapse: collapse;
            margin: 0px auto;
            /*background: black;*/
            /*color: white;*/
        }
        .main_1 thead,.main_1 tr,.main_1 th {
            border: 2px solid red;
            width: 70px;
            height: 40px;
            /*margin: 30px auto;*/
        }
        .main_2 table {
            border-collapse: collapse;
            margin: 0px auto;
            text-align: center;
            animation: mymove 8s linear infinite;
            border-spacing: 0;
        }
        .main_2 tbody,.main_2 tr,.main_2 td {
            border: 2px solid red;
            width: 70px;
            height: 40px;
            /*margin: 0px auto;*/
            /*margin-top: 30px;*/
            /*border-spacing: 0;*/
        }
        .main_2 {
            /*border: 2px solid purple;*/
            overflow: hidden;
            height: 200px;
        }
        @Keyframes mymove {
            0% {
                transform: translateY(0%);
            }
            to {
                transform: translateY(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="main_1">
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="main_2">
        <table>
            <tbody>
                <tr>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                </tr>
            </tbody>
        </table>
        <table>
            <tbody>
                <tr>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

PT、小小马
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用JS+CSS实现滚动表格数据展示
06-06
利用CSS动画制作 Html 表格数据滚动显示, 实际自己开发也不难实现。实现的方法很多，下面是本人的一种实现方案，分享给大家。
纯CSS实现表头固定表格滚动条效果
12-24
纯CSS实现表头固定表格滚动条效果，所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
写一个pc端的文字无缝滚动
qq_40711550的博客
11-26 360
``1 <div id="box"> <ul id="con1" ref="con1" :class="{anim:animate==true}"> <li v-for='item in items' :key="item">{{item.name}}</li> </ul> </div> export default { data() { return { animate
css实现列表无缝滚动
最新发布
weixin_52830464的博客
06-03 396
注意:列表数据数量要和动画时间要匹配，否则会滚动的很快或很慢。
纯css实现内容可滚动的表格
议军饷
08-17 4107
实现纯css实现内容可滚动的表格，需要将表格的内容（tbody，tr，thead，td等元素的display属性设为block） 表格的HTML代码 &lt;table class="scrollTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="field1Th"&gt;field1Th&lt;/th&gt; &lt;th c
利用CSS动画制作 Html 表格数据滚动显示
elie_yang的博客
12-22 8844
直接上图看最终实现效果： DataV里有这个效果，看起来高大上，实际自己开发也不难实现。实现的方法很多，下面是本人的一种实现方案，分享给大家。 这个效果需要解决2个问题： 1：首尾的数据衔接； 2：css动画实现； 首先利用js 构造一些数据； Html 结构如下： <div class="table-title"> &...
table 自动循环滚动
first_class_nor的博客
08-16 657
表格使用了 layUI组件库。
用CSS3实现无限循环的无缝滚动的示例代码
12-02
【CSS3实现无限循环无缝滚动】在网页设计中，为了创建动态效果，有时我们需要让一些内容如新闻、公告等在页面上实现无限循环滚动。本文将详细介绍如何利用CSS3的特性来实现这一功能，尤其关注`transform`和`...
jquery无缝向上滚动实现代码
10-27
标题中的“jquery无缝向上滚动实现代码”指的是使用jQuery库来创建一种滚动效果，使得内容能够不间断、平滑地从屏幕底部向上滚动，给人一种无缝循环的感觉。这种效果常用于新闻滚动条、广告轮播或者网站导航栏等场景...
table无限循环无缝滚动.zip
09-01
需要注意的是，这种无缝滚动的实现可能会影响性能，特别是当表格数据量巨大时。因此，优化是必不可少的，例如使用虚拟滚动（只渲染可视范围内的行）来减少DOM元素的数量，或者对大数据进行分页处理。 总的来说，...
JavaScript实现垂直向上无缝滚动特效代码
10-21
9. 循环向上滚动的文字实现：实际的滚动实现通过JavaScript定时器定时改变dome2层的innerHTML属性，使其内容等于dome1层的内容，再利用CSS样式隐藏dome层中的内容溢出，从而实现了向上滚动的视觉效果。 10. 代码的...
纯CSS实现的表格滚动条效果
02-16
纯CSS实现的表格滚动条效果，非常美观和实用。代码简短清晰。
实现表格动态滚动效果
05-04
通过CSS+Javascript实现类似表格的动态滚动效果，用ul和li标签模拟表格，文件包括实现源码。
纯css实现无缝滚动
09-03
消息列表向上滚动，不使用js操作，纯css3实现向上无缝滚动。
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
主要给大家介绍了关于如何利用纯css实现table固定列与表头，中间横向滚动的相关资料，文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
css 实现table表头固定，内容进行滚动 （两种方式）
让心在跳动
06-11 9703
首先要明确功能需求： 固定表头 table垂直滚动条 table列宽自适应 第一种方式：纯css <!DOCTYPE html> <!-- 不加此标签，IE不生效 --> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="pragma" content="no-cache"> <meta
前端js+css表格自动滚动播放-方法
zf2451597310的博客
11-28 1744
背景：项目是做大屏需要在表格上做一些表格实时滚动播放，这时候以下可以快速帮你实现此功能，话不多说，直接展示~css最好将表格的overflow设置为hidden以上就可以做出表格自动滚动的效果啦。注意：#project_table_tbody是我命名的table的名字。
利用JS、CSS实现列表自动滑动滚动
zheshiyangyang的博客
04-05 3623
这几天在做，对于大屏有很多信息需要实时滚动，废了点力气学的明明白白的，特来记录供大家学习。
表格自动向上滚动
weixin_33713350的博客
09-13 1420
2019独角兽企业重金招聘Python工程师标准>>> ...
css3 实现表格循环滚动
02-06
可以使用 CSS3 的 `animation` 和 `transform` 属性来实现表格的循环滚动效果。 首先，需要为表格的容器元素添加 `overflow: hidden` 属性，使超出容器的部分隐藏。然后，为表格设置一个高度，并将其位置设为绝对定位，这样才能对表格进行动画。接下来，使用 `animation` 属性来定义动画的名称、时长、循环次数等属性。最后，使用 `transform: translateY()` 来控制表格在垂直方向上的移动。 示例代码如下： ```css .table-container { overflow: hidden; position: relative; height: 200px; } .table { position: absolute; animation: scroll-table 10s linear infinite; } @keyframes scroll-table { from { transform: translateY(0); } to { transform: translateY(-100%); } } ``` 上述代码中，`.table-container` 是表格的容器元素，`.table` 是表格本身。动画 `scroll-table` 持续时间为 10 秒，每次循环执行一次，从初始位置移动到距离容器顶部 100% 的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值