css解决 tbody数据过多时滑动展示数据，thead不隐藏

最新推荐文章于 2024-05-09 10:37:05 发布
最新推荐文章于 2024-05-09 10:37:05 发布
阅读量204 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lu2815731764/article/details/132205259
版权

能用，但不是很好的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>thead不隐藏</title>
    <style>
        fieldset {
            width: 100%;
            height: 200px;
            min-height: 200px;
        }

        table {
            width: 100%;
        }

        th, td {
            width: 25%;
            text-align: center;
        }

        .overflow_table {
            width: 100%;
            max-height: 120px;
            overflow-y: auto;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: transparent;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>用户信息</legend>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>
                </thead>
            </table>
            <div class="overflow_table">
                <table>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>小明</td>
                            <td>12</td>
                            <td>男</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>小红</td>
                            <td>11</td>
                            <td>女</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>小明</td>
                            <td>12</td>
                            <td>男</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>小红</td>
                            <td>11</td>
                            <td>女</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>小明</td>
                            <td>12</td>
                            <td>男</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>小红</td>
                            <td>11</td>
                            <td>女</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>小明</td>
                            <td>12</td>
                            <td>男</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>小红</td>
                            <td>11</td>
                            <td>女</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </fieldset>
    </form>
</body>
</html>

小庆_007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
「HTML和CSS入门指南」tbody 标签详解
a451319296的博客
06-05 1762
tbody 标签是一个重要的标签，在 HTML 中用于标识表格的主体部分。使用 tbody 标签可以帮助您提高表格的可读性和理解性。在使用 tbody 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能，并避免兼容性问题。
table表格固定thead，tbody可滑动
一只程序喵
11-12 1276
效果图： html: <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>出生年月</th> <th>手机号码</th&g
表格（table）列太多，实现固定列，滚动条滑动
热门推荐
iteye_8157的博客
02-23 1万+
效果如下图所示。  最左边的四列，以及最后一列为固定列。中间的为滚动列。 具体实现思路： 创建三个表格。 左边四列为table1;中间多列为table2,右边四列为table3. &lt;div style="width:17%;float:left;clear:both;"&gt; &lt;table id="table1"  width="100%"&gt;&lt;/tab...
纯css实现table的表头固定tbody内容显示垂直滚动条
最新发布
qq_52700250的博客
05-09 172
滚动条不占用位置设置
用css给tbody加垂直滚动条的具体思路及样式代码
12-13
思路就是 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度 width:200px 代码如下： 复制代码代码如下: <table class=”table”> <thead> <tr> <th>Id</th> <th>Name</th> <th>Category</th> <th>MonthAmount</th> <th>hasBackUp</th> <th>score</th> </tr> </thead> <
如何用纯CSS固定thead实现表格滚动？tbody设置overflow之密
Vilien (Mr.Bin) 技术笔记
07-29 9896
首先，大家是不是在做下面代码这样的尝试？ THEAD-TD1THEAD-TD2 style="height:100px;overflow:auto;"> TBODY-TD1TBODY-TD2 TBODY-TD1TBODY-TD2 TBODY-TD1TBODY
【ant design vue的table设置scroll后出现滚动条的隐藏处理】
weixin_55005618的博客
01-28 6501
【代码】【ant design vue的table设置scroll后出现滚动条的隐藏处理】
利用js+css+html实现固定table的列头不动
11-26
这个功能可以提高用户体验，特别是处理大量数据时。本文将详细解释如何使用JavaScript（js）、CSS（css）和HTML（html）实现这一效果。 首先，我们从CSS部分开始。`#scroll_head` 是我们用于固定列头的元素，设置其...
superTable,html+css+js轻量冻结上左表头，实现上下左右滑动
09-06
"superTable"项目就是为了解决这个问题，它提供了轻量级的解决方案，允许表头在上下左右滑动时保持固定，从而增强用户体验。 "superTable"的核心技术包括HTML、CSS和JavaScript，这三者是构建网页动态交互的基础。...
解决layui表格的表头不滚动的问题
10-16
然而，在实际应用中，用户可能会遇到表格在数据过多时表头不滚动的问题，这使得用户在浏览长表格时无法清晰地看到表头信息。本文将详细介绍如何解决 layui 表格表头不滚动的问题。 首先，我们需要理解问题的核心...
纯CSS实现的表格滚动条效果
02-16
在网页设计中，表格是一种常见的数据展示方式，而滚动条则是处理大量数据时不可或缺的元素。本主题聚焦于如何使用纯CSS技术来实现一个既美观又实用的表格滚动条效果。这种效果可以让用户在不改变表格整体布局的情况...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
在固定框高内图片剧中显示，不变形
12-05 500
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
css overflow溢出显示隐藏
lxllxl211的博客
10-05 2089
将 overflow: hidden;改为overflow: scroll;将overflow: scroll;改为 overflow: scroll;有定位的盒子慎用overflow: hidden;/* 超出的时候显示滚动条，不超出不显示 */将默认改为 overflow: hidden;运行结果：溢出的部分显示滚动条 不溢出也显示。默认是：overflow: visible;运行结果：超出的时候显示滚动条，不超出不显示。溢出的部分显示滚动条 不溢出也显示*/运行结果：隐藏了溢出的部分。
css3——max-height 和 min-height
肖的博客
10-31 1767
max-height：最大高度 为了避免内容太多将高度撑太高影响布局美化统一，这个时候我们设置最大高度限制。比如一个 table tr td 表格对象里装一个图片，而图片高度不确定，如果太高了不想图片撑破 tr td 表格，这个时候通过 css max-height 限制图片最大高度是有必要的。 min-height：最小高度 为了避免对象（可以是在加载过程中）没有内容时候不能撑开，但内容多少不能...
html5 表格纵向滚动条,纯css实现table的表头固定tbody内容显示垂直滚动条
weixin_35937871的博客
06-03 2296
最近在做项目是经常用到table表格来做数据统计，数据少时还好，但是数据多就会导致整个页面看起来乱，用户体验不好，为了使得用户体验更好，所以就会为table的内容上显示滚动条，这样即使再多的数据也不怕因为过多导致页面显示难看。实现的方法有很多，这里列举几个比较好的整理下来，作为一个学习笔记，也为需要的小伙伴提供思路。首先要明确我们需要完成的效果：1.固定表头2.table垂直滚动条3.table列...
css滚动条设置（选择器）
weixin_49934623的博客
11-18 947
::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动条轨道. ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分. ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分. ::-webki
css postion属性详解及用法
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-25 9556
前言：css是前端的必要及能之一，今天总结一下css中postion属性。 1.postion是什么及取值； position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static（默认） relative（相对定位） fixed（固定定位） absolute（绝对定位） sticky（动态效果） 2.使用方法及场景 1.stat...
H5页面的表格上下左右可以滑动 头部不动
05-26
然后，我们需要将表格的表头设置为固定位置，这样就可以实现表格上下滑动时表头保持不动。具体实现步骤如下： 1. HTML代码结构： ```html <thead> 表头1 表头2 表头3 </thead> <tbody> 内容1 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值