table中thead保持不动,tbody滚动(2)
2016-01-13 11:59
363 查看
如果table中的th和td都没有合并列,可以不设th和td宽度
#tblDataList{ height:600px;}
#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 )
}
<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>
#tblDataList{ height:600px;}
#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 )
}
<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>
相关文章推荐
- installshield中杀死某一个进程
- PHP自动加载类
- 走进nginx事件驱动模型
- Android编程之控件状态配置文件实例
- This Handler class should be static or leaks might occur (null) more
- SQLite数据库常用语句及MAC上的SQLite可视化工具MeasSQLlite使用方法
- [ZOJ]2103 Marco Popo the Traveler(欧拉回路/通路)
- javascript笔记——jqGrid再次封装
- python-1
- NPOI使用手册
- 自定义拦截器
- C++引用
- Android开发中常见问题小结
- CocoaPods简介及最新详细使用
- VMware安装Centos时看不到“下一步”按钮
- Percona XtraBackup备份数据库关于数据路径默认选择和show variables
- iOS UIDynamic动画
- ionic对话框
- js 书写规范
- 加载本地html,js, css文 件