CSS固定表头

最新推荐文章于 2024-04-03 15:29:15 发布
最新推荐文章于 2024-04-03 15:29:15 发布
阅读量256 收藏
点赞数
分类专栏： 前端 文章标签： html css3
本文链接：https://blog.csdn.net/wgzblog/article/details/107880045
版权

CSS固定表头

<!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-Compatible" content="ie=edge">
    <title>纯CSS table表格 thead固定 tbody滚动</title>
    <style>
        
        /* 滚动条宽度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滚动条颜色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
      
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        
 
    </style>
</head>
 
<body>
    <section class="table-box">
        <table cellpadding="0" cellspacing="0">
            <caption>纯CSS table表格 thead固定 tbody滚动</caption>
            
            <thead>
                <tr>
                    <th>序 号</th>
                    <th>姓 名</th>
                    <th>年 龄</th>
                    <th>性 别</th>
                    <th>手 机</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>
凌云说
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css固定表格头部
weixin_41141811的博客
06-25 1356
固定表头 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定表头</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .table-container {
纯CSS实现表头固定
03-06 3689
纯CSS实现表头固定之所以难，主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个，是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果，动用了数量惊人的CSS hacks……我觉得，如果搞到代码如此难懂且难扩展，还不如用javascript好了。碰巧今天我也遇到这种需求，换个视角想想，真的搞出来了。我们知道，CSS是负责表现，
css固定table表头的实现代码可同时看到表头和表格底部
09-25
一次性将数据全部显示出来，页面就会出现滚动条，这样的话就不能同时看到表头信息和表格底部的数据记录,把表头固定可以解决此问题
简单css实现表格头部固定
山外小楼
09-16 2522
简单css实现表格头部固定
CSS实现固定首列和表头
__猫玖__的博客
02-16 2333
首行首列固定
最简单的纯css固定table的表头
yfx000的专栏
06-01 5083
页面table通常都需要做表头固定，参考了n种实现方式，最终还是选择了用纯css来做表头固定，只是因为方便，易于调试。
css固定表头、行头样式代码
09-25
在给定的文件中，我们看到一个使用CSS实现固定表头和行头样式的示例。 首先，我们来理解一下这个示例的核心部分。`<style>`标签内定义了一系列CSS类，这些类用于设置特定元素的样式，以实现固定表头和行头的效果。 ...
CSS 固定表头和列
05-27
总之，实现CSS固定表头和列是提高数据表格可读性和用户交互性的重要手段。通过理解CSS定位原理并结合HTML结构，我们可以创建出符合需求的自定义解决方案。对于更复杂的应用场景，利用现有的JavaScript库可以提供更多...
css固定表头和列.html
01-11
css固定table表头和列，亲测可用
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
纯CSS实现表头固定表格滚动条效果
12-24
纯CSS实现表头固定表格滚动条效果，所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过
09-25
总结来说，实现CSS固定表头主要依赖于定位技术和特定于浏览器的特性，如IE6的`expression`。虽然这种方法对于老版本浏览器是有效的，但在现代开发中，我们应该考虑使用更现代、更兼容的CSS技术，以确保更好的跨...
css固定表头和第一列
02-22
css和html固定表头和第一列，可上下拖动和左右拖动
html原生css 固定列和表头 表格
weixin_43205308的博客
04-27 444
【代码】html原生css 固定列和表头。
css 固定表头
最新发布
u010865136的专栏
04-03 538
表明该元素将固定在距离视口顶部的位置，即保持在屏幕的顶部。这通常用于实现类似固定表头、固定导航栏等效果。类名的元素设置为粘性定位（sticky positioning），并让其距离视口顶部（top）为 0。页面条数太多，下滑动时，表头上去了，想要将表头固定在顶部，锁住表头。粘性定位使得元素在滚动到特定位置时会固定在屏幕上。表格表头那一行tr中添加如下属性。，这段代码的作用是将具有。
纯CSS实现Table固定表头和首列
热门推荐
Ghjkku的博客
09-15 8万+
HTML结构上，必须将 放在 子节点，且内部不要有其他 position 设置。Table固定表头和首列这种需求应该比较常见。以往的做法，需要写一大堆脚本，而现在，可以使用position:sticky轻松实现这个效果。
纯CSS固定table表头
海天鹰
05-01 344
【代码】纯CSS固定table表头。
超简单纯css固定表头
03-27 401
* 隐藏滚动条*************************************************** */
css 表头固定不动
05-26
要实现表头固定不动，可以使用 CSS 中的 `position: sticky` 属性。这个属性可以让元素在滚动到指定位置时停止滚动，并固定在屏幕上方或下方。 首先，需要给表格的表头添加一个 CSS 类，例如 `.fixed-header`。然后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值