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;
}
#tblDataList tbody tr {

display:table;

width:100%;

table-layout:fixed;

}
#tblDataList thead {

width: calc( 100% - 1.17em )

}

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

<thead>

<tr><th >时间</th><th>COD<br>(mg/L)</th><th>水流量<br>(m3/h)</th><th>氨氮<br>(mg/l)</th></tr>

</thead>

<tbody>

<tr class=" "><td>2016-01-01 00:00:00</td><td>17.1600</td><td>15.3200</td><td>3.1200</td></tr>

<tr ><td>2016-01-01 00:10:00</td><td>17.1600</td><td>14.9900</td><td>3.1200</td></tr>

<tr class=" "><td>2016-01-01 00:20:00</td><td>17.1600</td><td>15.1700</td><td>3.1200</td></tr>

<tr><td>2016-01-01 00:30:00</td><td>17.1600</td><td>15.2100</td><td>3.1200</td></tr>

<tr class=" "><td>2016-01-01 00:40:00</td><td>17.1600</td><td>15.1800</td><td>3.1200</td></tr>

<tr class=" " style=""><td>2016-01-01 00:50:00</td><td>17.1600</td><td>15.0200</td><td>3.1200</td></tr>

</tbody></table>

时间: 2024-10-17 16:11:55

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

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; wid

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"