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

如果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>

时间: 2024-08-02 04:36:50

table中thead保持不动,tbody滚动(3)的相关文章

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

如果table中的th和td都没有合并列,可以不设th和td宽度 #tblDataList{ height:600px;}#tblDataList thead { display:block;} #tblDataList tbody { display:block; height:600px; overflow-y:scroll;} #tblDataList thead tr { display:table; width:100%; table-layout:fixed;}#tblDataLis

table 中 thead tbody tfoot 加载顺序问题

这几个标记主要是用于提高table标签的加载以及显示的,说白了,就是分布加载.在传统的浏览器,在加载 时,是当所有的标签中元素都被下载后才会显示,当然这样的用户体验是不好的.再加入了这几个t打头的标签后,table就会分布的加载table中的元素,顺序依据写在table中的标签顺序进行. 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个

table中thead固定一直在最上面

<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet"> <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> <li

table之thead兼容

今天遇到一个小bug,是关于table中thead,tbody,tfoot的兼容问题: 在开发的时候为了方便写样式,我就把表格的标题部分关于th的内容放在了thead中,当然了,我也没有写tbody和tfoot,此时,检查兼容的时候问题随之而来: 在IE,Chrome,Opera下都没问题,但是在Firefox中出现了一个问题,下面tr的内容统一向上走了一个tr,最后一个tr的内容变为空了,与thead的内容重合,我首先想到的是我没有浮动啊,什么情况.随后我检查了下元素,将thead改为tr,问

js在table中添加tbody块,方便整块的添加和删除

利用js在table中添加tbody块,方便整块的添加和删除,以下为添加. <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> </table> <script language="javascript"> var value = "内容&quo

将JSON数组显示前台Table中

将JSON数组显示前台Table中 在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题.具体的代码如下: (前提:利用ajax获取过来的JSON字符串必须是规范的,这样才能解析正确.后台获取数据库中数据的代码省略了) 1.前台JS代码(使用之前引入JQuery的js库文件) $.ajax({ type: "GET", url: "UserList.ashx?Action=List",//利用ajax请求

Jquery Ajax 异步设置Table中某列的值

可根据table中某列中的ID去改变某列的值! JS: 1 $(document).ready(function () { 2 setTimeout(GetDate, 1000); 3 4 }); 5 6 function GetDate() { 7 $("#tbData tbody").find("tr").each(function () { 8 var prjectBalanceObj = $(this).find("td:eq(3)");

jQuery_review之table中根据行选中,进行背景变色和radio选中

在各种WEB系统中经常可以看到类似的操作,点击中列表的某一行,然后当前行就会变成其他的颜色,并且其中的radio就会被选中.并且一般还会鼠标滑过的时候的动态特效,比如鼠标滑过当前行的时候会有一个变色的样式.趁着复习jQuery的机会,看一下使用jQuery来实现这个功能的步骤. 在这个功能当中,有一个需要注意的小知识点:如何增加一个radio?在HTML中,增加一个HTML使用如下的代码<input type="radio" name="fruit">这

jQuery_review之table中根据行选中,进行背景变色和checkbox选中

继续复习jQuery,对table来说,上面除了单选之外,还有多选的一个控制.对于多选来说,需要对多选的内容进行高亮显示,还应该在页面加载的时候,对已经默认选中的内容进行高亮.这些小功能也是复习jQuery选择器的一个很好地素材,有非常多的实现方式,不仅仅拘泥于一种,只要能将功能健壮的实现了,就是比较不错的了. 在一本资料上,看到了这样的一种jQuery的写法,还是非常的惊艳! element[hasClassName?"removeClass":"addClass"