html、css固定头部

最新推荐文章于 2025-03-17 12:00:46 发布
最新推荐文章于 2025-03-17 12:00:46 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_24935119/article/details/105911039
版权

table表格中实现tbody部分可滚动，且thead部分固定

效果图：

关键css:

table thead, table tbody {
            display: block;
        }

        table tbody {
            height: 700px;
            overflow-y: auto;
        }

        table td, table th {
            width: 80px;
        }

具体代码

<!--固定首行-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style>
        body{
            padding-top: 30px;
        }
        table {
            /*width: 600px;*/
            background: grey;
            margin: auto;
        }
        th,td{
            background: #FFF;
            text-align: center;
            height: 40px;
        }

        /*固定thead，tbody滑动 start*/
        table thead, table tbody {
            display: block;
        }

        table tbody {
            height: 700px;
            overflow-y: auto;
        }

        table td, table th {
            width: 80px;
        }
        /*固定thead，tbody滑动 start*/


    </style>
</head>
<body>
<div >
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年级</th>
            <th>数学分数</th>
            <th>语文分数</th>
            <th>英语分数</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>一年级</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

 

 

网页固定头部功能
qq_51053759的博客
09-09 743
固定头功能实现步骤： 1、写出固定到头部的结构与样式 2、通过js或jq动态显示 分析： 事件源：window document 事件类型：onscroll(js)、scroll(jq) 事件处理函数： 获取滚动条距离顶部的距离 判断距离：>500显示固定头部 else隐藏固定头部 细节： 如果显示固定头部（把头部中的搜索框放入固定头部的盒子） 如果隐藏固定...
css固定表格头部
weixin_41141811的博客
06-25 1431
固定表头 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定表头</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .table-container {
html 表头固定及列固定
10-29
对网页中表格进行列及行的固定 有多重样式可充选择
网页表格表头固定技术详解
最新发布
weixin_32661831的博客
03-17 635
简介：在网页设计中，为了解决用户在滚动查看长表格内容时无法看到列标题的问题，固定表格的表头变得至关重要。本文将介绍如何使用HTML和CSS技术来固定<thead>表头，确保其在滚动过程中始终可见。包括绝对定位、CSS Sticky定位、Flexbox和Grid布局、JavaScript或jQuery插件的使用，以及响应式设计和兼容性考虑等技术点。通过这些方法，用户在处理大量数据时能够更好地理解信息，从而提升网页的可用性和用户体验。
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
Z_B_L的博客
10-12 1160
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
html头部底部固定，中间内容滚动
weixin_53797856的博客
12-15 589
【代码】html头部底部固定，中间内容滚动。
html文件头部固定代码
weixin_45151960的博客
10-11 3432
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--title定义HTML文档的标题--> <title>html头部</title> <!--定义HTML文档中的元数据--> <base href="http://www.w3cschool.cc/images/" target="_blank">
表格的头部固定效果通过css及jquery分别实现
01-19
1.第一种方式利用css的样式来实现表格的头部固定 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=GB...
实现CSS固定头部与可滚动表格的技巧
为了深入探讨这个主题，下面将详细介绍使用纯CSS创建一个具有固定头部的可滚动表格的技术要点： 1. HTML结构设计： 在设计HTML结构时，需要使用一个`<table>`元素，并将其包裹在一个`<div>`容器中。`<div>`容器的...
html、css固定table头部
曾沂宏的博客
07-12 462
<!--固定首行--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Table</title> <style> body { padding-top: 30px; } table { /*width: 600px;*/
JS实现部分HTML固定页面顶部随屏滚动效果
11-24
本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果。分享给大家供大家参考，具体如下： 我们经常在淘宝网看到这样的特效，商品列表特别长，而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了，那么它会自动判断是否到顶端了，然后一直置顶从而不怕遮挡。 这种特效是通过JavaScript和CSS实现的，在实际开发中有不少用途，下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码，兼容性不错，在IE、Firefox、Chrome下都能正常工作。 使用这个特效代码需要注意，如果在侧边栏使用，则需要注意，侧栏中的栏目不能使用JavaScript动态加载，必须用静态的格式，否则
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
通过table的用来锁定表头，内置封装的JS控制锁定列，在页面中直接调用JS方法设定。
html建立顶部固定部分
haoranhaoshi的博客
09-18 1558
建立顶部固定部分： <!DOCTYPE html> <html lang="en"> <head> <title>置顶</title> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <style> body { margin:
在HTML中固定表格表头的简单方法
yivifu的专栏
08-13 1549
表文介绍了一种不使用JavaScrip也不用第三方插件简单实现在HTML页面中固定表头滚动表格的效果。
html页面顶部固定,网页头部固定方法
weixin_29230059的博客
06-04 2461
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
头部固定定位 html,抵消一个html锚点来调整固定的头部[复制]
weixin_33561350的博客
06-10 248
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？This question already has an answer here:我正试图清理我的船锚的工作方式。我有一个固定在页面顶部的标题，所以当你链接到页面中其他地方的页面时，页面跳转，所以锚点位于页面的顶部，留下固定标题后面的内容(我希望这就说得通了)。我需要一种方法来从头部的高度偏移25px的锚点。我更喜欢HT...
【转】移动前端工作的那些事---前端制作篇之meta标签篇
weixin_30887919的博客
02-26 252
首先感谢原作者：webApp赵海洋 附上文章原地址：移动前端工作的那些事---前端制作篇之meta标签篇 移动端前端制作有些地方不同于互联网，这篇主要讨论的是meta标签。meta标签位于之间。是主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。这里只讨论移动端。附上代码进行说明： <!DOCTYPE html><!--...
HTML中表头固定
qsl319的博客
09-23 798
准备：先去官方网站下载插件包，datatable需要jQuery，所以还要提前下载jQuery插件。 引入文件： &lt;link rel="stylesheet" type="text/css" href="datatables.css"&gt;   &lt;script type="text/javascript" language="javascript" sr
CSS固定表格头部实现方法详解
在CSS中，定位是实现固定头部行的关键技术。定位属性允许你指定一个元素的位置，CSS提供了几种定位方式：`static`（默认），`relative`，`absolute`，`fixed`，以及`sticky`。在固定表头的场景中，最常用的是`fixed`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值