html table 实现表头固定

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量1k 收藏
点赞数
分类专栏： html 文章标签： html
原文链接：https://www.cnblogs.com/dacuotecuo/p/3657779.html
版权

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>表頭固定</title>
    <style>
        .table-head{padding-right:17px;background-color:#999;color:#000;}
        .table-body{width:100%;height: 300px;overflow-y: scroll;}
        .table-head table,.table-body table{width:100%}
        .table-body table tr:nth-child(2n+1){background-color: #f2f2f2;}
    </style>
</head>
<body>
    <div style="width:800px;">
        <div class="table-head">
            <table>
                <colgroup>
                    <col style="width: 180px;"/>
                    <col style="width: 180px;" />
                    <col style="width: 180px;"/>
                    <col style="width: 180px;" />
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="2">序號</th>
                        <th colspan="2">內容</th>
                    </tr>
                    <tr>
                        <th>序號1</th>
                        <th>序號2</th>
                        <th>內容1</th>
                        <th>內容2</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-body">
            <table>
                <colgroup>
                    <col style="width: 180px;"/>
                    <col style="width: 180px;"/>
                    <col style="width: 180px;"/>
                    <col style="width: 180px;"/>
                </colgroup>
                <tbody>
                    <tr><td>ceshi</td><td>ceshi</td><td>ceshi</td><td>ceshi</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

效果
效果图

糟糕的沙漠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html table表头说明,HTML table表头固定
weixin_34679596的博客
06-17 1930
HTML table表头固定说说我在最近项目中碰到的css问题吧，作为问题知识集合总结笔记：table tbody {display: block;height: 200px;overflow-y: scroll;}table thead,table tbody tr {display: table;width: 100%;table-layout: fixed; /**表格列的宽度由表格宽度决定...
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html Table实现表头固定
dearbaba_8520的博客
12-31 339
本文转载自：https://www.cnblogs.com/dacuotecuo/p/3657779.html 作者：dacuotecuo 转载请注明该声明。最近一直在搞前台琐碎的东西，也学习了一下linux，没有时间对新的东西进行深入的研究和学习，没有写博客，不过归咎其原因还是在于自己的惰怠。 废话不多说，今天想将一个前台页面设计的一个小东西分享一下，那就是平时我们设计表格的时候，通常都想将...
HTML table标签实现表头固定
2301_78416672的博客
05-11 292
表头表头表头表头表头内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
html 把table固定住,html Table实现表头固定
weixin_31129039的博客
06-24 759
合同号签约客户发布客户合同状态选定条件的发布周期额度看看css*{padding:0;margin:0;}th{border:1px solid #e6e6e6;line-height: 5vh;color:#666666;font-size: 16px;}table {border-collapse: collapse;width: 100%;}td {padding:5px;border:1p...
php中table固定表头,html Table实现表头固定
weixin_33586594的博客
04-15 239
合同号签约客户发布客户合同状态选定条件的发布周期额度看看css*{padding:0;margin:0;}th{border:1px solid #e6e6e6;line-height: 5vh;color:#666666;font-size: 16px;}table {border-collapse: collapse;width: 100%;}td {padding:5px;border:1p...
html table固定表头
weixin_42064877的博客
05-07 2543
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } ::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; borde..
HTML table标签实现表头固定，音视频学习指南来咯
m0_60607675的博客
04-01 355
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
HTML table标签实现表头固定(1)，web开发增强
m0_60607562的博客
04-01 328
表头表头表头表头表头内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
html table 表头停留,HTML table固定表头
weixin_42393272的博客
06-17 601
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....1.thead和tbody的display设置为block;这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;2.用两个table模拟,第一个作为thead,第二个作为tbody;需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Angular8 实现table表格表头固定效果
01-21
最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况（下一篇中介绍）。 效果图： html 结构 按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。 然后通过 ...
HTML Table固定表头完美实现
03-16
本篇文章将探讨如何通过HTML、CSS以及JavaScript技术，实现HTML表格的固定表头效果，使得在滚动时表头始终保持可见。 首先，我们来创建一个基本的HTML表格结构。在HTML文件中，我们可以这样编写： ```html <!...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3270
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 977
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 691
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1923
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
html table 表头固定
04-17
好的，这是一个技术问题，我可以为你提供解答。你可以使用CSS中的position:sticky属性来实现表头固定的效果。具体操作可以参考以下代码： table { width:100%; border-collapse:collapse; } th { height:50px; background-color:#f2f2f2; position:sticky; top:0; } td, th { border:1px solid #ddd; padding:8px; text-align:left; } 请注意，这种方法可能不支持一些旧的浏览器。如果需要兼容旧浏览器，可以考虑使用JavaScript实现固定表头的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值