html table 实现表头固定

最新推荐文章于 2024-05-11 01:32:20 发布
最新推荐文章于 2024-05-11 01:32:20 发布
阅读量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
    评论
专栏目录
JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）
weixin_30819085的博客
09-30 1424
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-...
table表身滑动，表头不动样式
qq_36939013的博客
09-27 926
.toolTipx{ display: flex; flex-direction: column; background: #fff; color: #6c6c6c; max-height: 300px; width: 300px; .head-box { width: 300px; padding-right: 5px; background: #dee0ee; } .toolTip-title { color: #32c5ff;
HTML table表头固定
普罗旺斯
09-27 1280
【代码】HTML table表头固定。
HTML table标签实现表头固定
最新发布
2301_78416672的博客
05-11 298
表头表头表头表头表头内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
HTML table表头固定（自己做项目使用的几种方法）
热门推荐
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &amp;amp;amp;amp;amp;amp;l...
自己造轮子之如何用HTML+JS搭建表头/列固定Table
随时准备转行
08-21 3341
手肝HTML+JS的表头/列固定Table组件
实现html table表头固定（css +html）
qq_42977016的博客
12-17 1149
实现html table表头固定（css +html） 实现table表头固定的步骤 实现思路为： 1，两个table一个为头部，一个为表单部分。 2，利用colgroup 3，利用css来给滚动条留出位置 #本文非完全原创，思想取自各大博客，框架等。由于本人没办法找到博客地址，此部不贴原文链接。 先上代码! <div class="wrapbox"> <div cla...
HTML table 表格 thead 表头固定，tbody 滚动
csdn_Info的专栏
04-12 7246
第一种方式实现 第二种方式实现 第一种方式实现 使用 css 样式设置thead 和 tbody 【 推荐方式 】 #tableid&gt;thead&gt;tr{ display: table; width: 100%; table-layout: fixed; } #tableid&gt;tbody{ display: blo...
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
bootstrap-table实现表头固定以及列固定的方法示例
10-17
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Angular8 实现table表格表头固定效果
01-21
最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况（下一篇中介绍）。 效果图： html 结构 按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。 然后通过 ...
HTML固定Table标题行的四种方法
08-31
Javascript脚本实现HTML页面中表格Table的标题行固定位置，并与表格内容对齐。
HTML Table固定表头完美实现
03-16
本篇文章将探讨如何通过HTML、CSS以及JavaScript技术，实现HTML表格的固定表头效果，使得在滚动时表头始终保持可见。 首先，我们来创建一个基本的HTML表格结构。在HTML文件中，我们可以这样编写： ```html <!...
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
Z_B_L的博客
10-12 1017
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
table原生固定表头和固定列实现
A good man
08-23 1143
【代码】table原生固定表头和固定列实现。
HTML原生table固定表头和列
qq_45587146的博客
05-08 248
HTML原生table固定表头和列
html纯CSS固定table表头和列
netsee1的博客
06-17 623
固定表头，固定列，纯CSS，html
html table 表头固定
04-17
你可以使用CSS中的position:sticky属性来实现表头固定的效果。具体操作可以参考以下代码： table { width:100%; border-collapse:collapse; } th { height:50px; background-color:#f2f2f2; position:sticky; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值