首页 > 其他 > 详细

table中thead保持不动,tbody滚动(3)

时间:2016-01-13 15:40:45      阅读:263      评论:0      收藏:0      [点我收藏+]

如果thead中需要合并列

#tblDataList thead {display:block;}
#tblDataList tbody { display:block;height:600px; overflow-y:scroll;overflow-x: hidden;}
#tblDataList thead tr { display:table; width:100%; table-layout:fixed;}
#tblDataList tbody tr {display:table; width:100%; table-layout:fixed;}
#tblDataList thead {width: calc( 100% - 1.17em )}
.ul_inth{ padding: 0px; margin: 0px; border-top: 1px solid;}
.li_inthF{width: 33%;list-style: none;float: left;}
.li_inth{ width: 33%;list-style: none;float: left; border-left: 1px solid;}

 

<table id="tblDataList" cellpadding="0" cellspacing="0">

<thead>

<tr>

<th rowspan="2">时间</th>

<th colspan="3">烟尘<ul class="ul_inth"><li class="li_inthF">实测(mg/m3)</li><li class="li_inth">折算(mg/m3)</li><li class="li_inth">排放量(mg/m3)</li></ul></th>

<th colspan="3">氮氧化物<ul class="ul_inth"><li class="li_inthF">实测(mg/m3)</li><li class="li_inth">折算(mg/m3)</li><li class="li_inth">排放量(mg/m3)</li></ul></th>

<th colspan="3">二氧化硫<ul class="ul_inth"><li class="li_inthF">实测(mg/m3)</li><li class="li_inth">折算(mg/m3)</li><li class="li_inth">排放量(mg/m3)</li></ul></th>

<th rowspan="2">气压<br>(mbar)</th>

<th rowspan="2">烟温度<br>(℃)</th>

<th rowspan="2">烟流速<br>(m/s)</th>

<th rowspan="2">氧<br>(%)</th>

<th rowspan="2">标态流量<br>(m3/s)</th></tr></thead>

<tbody>

<tr class=" "><td>2016-01-01 00:00:00</td><td>12.9900</td><td>16.3800</td><td>0.0487</td><td>38.8600</td><td>48.9800</td><td>0.1457</td><td>10.7600</td><td>13.5600</td><td>0.0403</td><td>-0.0700</td><td>54.4300</td><td>6.3500</td><td>18.6200</td><td>62.4700</td></tr>

<tr style=""><td>2016-01-01 00:05:00</td><td>12.8000</td><td>16.1500</td><td>0.0480</td><td>38.6700</td><td>48.8000</td><td>0.1450</td><td>10.4700</td><td>13.2100</td><td>0.0393</td><td>-0.0700</td><td>54.4000</td><td>6.3500</td><td>18.6200</td><td>62.5100</td></tr>

</tbody></table>

table中thead保持不动,tbody滚动(3)

原文:http://www.cnblogs.com/ouyn/p/5127181.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!