Table固定列和表头

最新推荐文章于 2024-08-22 10:22:01 发布
最新推荐文章于 2024-08-22 10:22:01 发布
阅读量3.1k 收藏 20
点赞数
分类专栏： css 文章标签： table css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/typ1805/article/details/102921563
版权

一、实现思路：表格数据中存在合并单元格，网上找了好多列子都没有实现。最后是把一个table拆分为两个table实现的，第一个table（table1）中是需要固定的列及表头（表头只固定前四列和时段流量列，时间列是不固定的），第二个table（table2）是所有的数据，把table1定位在table2的上面。

二、效果图

三、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格实现固定列和表头</title>
    <style>
        /*table样式*/
        .table{width:100%;margin:auto;padding-top:0;font-size:12px;text-align:center;color:#666;}
        .table th{background-color:#f9f9f9;border:1px solid #e8e8e8;;height:40px;font-weight: bold;}
        .table td{border:1px solid #e8e8e8;border-top:0;height:40px;padding:0px 4px}
        .table tr:nth-child(2n){background-color:#f9f9f9}
        /*固定*/
        .container {position: relative;}
        .table1, .table2 {width: 800px;}
        .table1 {position: absolute;overflow: hidden;}
        .table1 td,th{background-color: white;}
        .table2 {overflow-x: scroll;}
    </style>
</head>
<body>
<div class='container'>
    <div class="table1">
        <table class="table" cellspacing="0" >
            <thead>
            <tr>
                <th rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">名称</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">总量（人次）</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码总量（人次）</th>
                <th colspan="2" >时段流量（人次）</th>
            </tr>
            <tr style="visibility: hidden;">
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td rowspan="2">0F主出入口</td>
                <td rowspan="2">1600</td>
                <td>C001_1_1B</td>
                <td>800</td>
            </tr>
            <tr>
                <td>C002_1_1B</td>
                <td>800</td>
            </tr>
            <tr>
                <td rowspan="2">1F主出入口</td>
                <td rowspan="2">200</td>
                <td>C002_1_1B</td>
                <td>100</td>
            </tr>
            <tr>
                <td>C003_1_1B</td>
                <td>100</td>
            </tr>
            <tr>
                <td rowspan="2">2F主入口</td>
                <td rowspan="2">600</td>
                <td>C003_1_1B</td>
                <td>100</td>
            </tr>
            <tr>
                <td>C004_1_1B</td>
                <td>500</td>
            </tr>
            <tr>
                <td rowspan="2">B1F直梯</td>
                <td rowspan="2">600</td>
                <td>C004_1_1B</td>
                <td>300</td>
            </tr>
            <tr>
                <td>C005_1_1B</td>
                <td>300</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="table2">
        <table class="table" cellspacing="0">
            <thead>
            <tr>
                <th rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">名称</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">总量（人次）</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码总量（人次）</th>
                <th colspan="7" style="text-align:left; padding-left: 200px;">时段流量（人次）</th>
            </tr>
            <tr>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:00</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:05</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:10</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:15</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:20</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:25</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:30</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td rowspan="2">0F主出入口</td>
                <td rowspan="2">1600</td>
                <td>C001_1_1B</td>
                <td>800</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>800</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C002_1_1B</td>
                <td>800</td>
                <td>800</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td rowspan="2">1F主出入口</td>
                <td rowspan="2">200</td>
                <td>C002_1_1B</td>
                <td>100</td>
                <td>0</td>
                <td>100</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C003_1_1B</td>
                <td>100</td>
                <td>0</td>
                <td>100</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td rowspan="2">2F主入口</td>
                <td rowspan="2">600</td>
                <td>C003_1_1B</td>
                <td>100</td>
                <td>0</td>
                <td>100</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C004_1_1B</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td rowspan="2">B1F直梯</td>
                <td rowspan="2">600</td>
                <td>C004_1_1B</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C005_1_1B</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

欢迎关注

 

tansci
关注
专栏目录
table固定表头和列头
12-15
固定表头和列头
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
【Quasar】【自定义组件】-重写Table、分页，并将内容固定于页面
最新发布
weixin_44207805的博客
08-22 210
【代码】【Quasar】【自定义组件】-重写Table、分页，并将内容固定于页面。
实现Table表头和列固定
08-01
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
固定表和行头与列头
我想我是海 冬天的大海 心情随风轻摆
04-25 1547
new document <!-- function FixTable(TableID, FixColumnNumber, width, height) { /// /// 锁定表头和列 /// sorex.cnblogs.com /// /
html固定标题列、标题头table
v5browser
04-25 389
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &amp
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
本篇文章主要探讨如何利用纯CSS实现table固定列与表头，同时在中间部分添加横向滚动条，以确保用户体验。 首先，我们面临的问题是表格内容因列数过多而产生换行，这影响了视觉效果。为了解决这个问题，可以使用CSS...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
总之，要实现bootstrap-table的表头和列固定功能，核心在于引入正确的库文件，并且使用bootstrap-table提供的API以及固定列所需的配置项。在实际应用过程中，可能会遇到各种问题，比如兼容性问题、样式错位等，需要...
移动端table固定表头与固定第一列
02-20
本教程将详细讲解如何在移动端实现"固定表头与固定第一列"的功能，以提升用户体验，使得用户在滚动时能够始终保持表头和第一列可见。 首先，我们需要理解HTML5中的`<table>`元素，它是用于创建表格的标准标签。在...
bootstrap table列和表头对不齐的解决方法
10-16
这种问题通常是由于数据列中的滚动条占据了额外的宽度，导致表头和数据列的div容器宽度不一致。 要解决Bootstrap Table列和表头对不齐的问题，我们可以利用Bootstrap Table提供的事件`onPostBody`。这个事件在表格...
BootStrap-Table固定列和表头
qq_42663973的博客
02-18 767
BootStrap-Table固定列和表头 需要引入的js和css 在使用js方式加载表格时，增加属性： $('#table').bootstrapTable('destroy').bootstrapTable({ fixedColumns: true, // 开启固定列功能 fixedNumber: 2, // 固定列数量 }) 完成，就这么简单！ ...
table表格固定行和列
05-11
table表格固定行和列。。。。。。。。。。。。。。。。。。。。。。。。。。。。
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
table固定表头和指定列
06-20
table 固定指定的列 以及表头 有实现例子
table表头及列固定
10-17
使用演示table元素，使用jquery实现表头及列固定，简单实用。
Table固定表头和列
dcke31608的博客
12-17 109
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>固定表头和列</title> <style> .FixedTitleRow { position: relative; ...
Table锁定行列
Kenshin Cui's Blog
03-29 7621
摘要：在使用表格显示数据时我们经常会遇到数据过多无法一屏完全显示的问题，这个时候我们就会给用户显示滚动条来拖动。但是多数情况下表格是带有表头的，纵向拖动往往就看不到表头；而横向拖动又会出现看不到主题列（例如统计某人基本信息时姓名就是主题列），这个时候怎么办呢？答案就是行列锁定。 主要内容： 1.行列锁定的常用方法 2.IE下实现行列锁定 3.使用jQuery开发一个简单的行列锁定插件 一、行列锁定的常用方法 从使用上来看，要实现行列锁定的效果无非就是使用第三方组件和自己从零做起一步步实现。第三方
table固定表头、固定列
RRRRRDong的博客
07-17 8460
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
固定Table的列
weixin_40607363的博客
02-27 4924
样例   &lt;div class="table_cont js_w" id="tableDiv" style="overflow-x:auto;"&gt;                  &lt;table class="layui-table dash_in " style="min-width:3500px; " &gt;                 
table左侧一列固定和固定表头
05-25
要实现左侧一列固定和固定表头，可以使用CSS的position属性和overflow属性。 首先，将表格的容器（例如div）设为position:relative，这样就可以使用绝对定位来实现左侧一列固定。 然后，在表格的thead中添加一个tr，将其设为position:sticky和top:0，这样就可以实现固定表头。 最后，在表格的tbody中，将第一列的td设为position:sticky和left:0，这样就可以实现左侧一列固定。 具体实现代码如下： HTML: ```html <div class="table-container"> <table> <thead> <tr> <th>固定表头</th> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>固定列</td> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>固定列</td> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> <!-- 其他行... --> </tbody> </table> </div> ``` CSS: ```css .table-container { position: relative; overflow-x: auto; } table { border-collapse: collapse; width: 100%; } thead tr { position: sticky; top: 0; background-color: #fff; } tbody td:first-child { position: sticky; left: 0; background-color: #fff; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值