Table固定列和表头
一、实现思路：表格数据中存在合并单元格，网上找了好多列子都没有实现。最后是把一个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>
欢迎关注
分手后的思念是犯贱
曾经终败给现在
灰太狼
àì夳堔傛蜴生んèń
骑猪看日落
Myth丶恋晨
还没有评论，来说两句吧...