Table thead remains motionless, tbody scrolling (2)

If the th and TD in the table do not have a merge column, you can set the TH and TD widths

#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 > Time </th><th>COD<br> (mg/l) </th><th> water flow <br> (m³) </th ><th> Ammonia nitrogen <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 remains motionless, tbody scrolling (2)