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>

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

标签：

原文地址：http://www.cnblogs.com/ouyn/p/5126824.html