The only way to do this is to use two separate tables.
<table id="tableHeader">
<colgroup>
<col class="column1"></col>
<col class="column2"></col>
<col class="column3"></col>
<col class="column4"></col>
<col class="column5"></col>
</colgroup>
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
</tr>
<thead>
</table>
<div id="tableBody-container">
<table id="tableBody">
<colgroup>
<col class="column1"></col>
<col class="column2"></col>
<col class="column3"></col>
<col class="column4"></col>
<col class="column5"></col>
</colgroup>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
</tr>
<tr>
<td>Val21</td>
<td>Val22</td>
<td>Val23</td>
<td>Val24</td>
<td>Val25</td>
</tr>
<tr>
<td>Val31</td>
<td>Val32</td>
<td>Val33</td>
<td>Val34</td>
<td>Val35</td>
</tr>
<tr>
<td>Val41</td>
<td>Val42</td>
<td>Val43</td>
<td>Val44</td>
<td>Val45</td>
</tr>
<tbody>
</table>
</div>
Then you will allow second table container to scroll. But you will need to apply same column width to both tables
#tableHeader {
width: 100%;
}
#tableHeader th {
text-align: left;
}
#tableBody-container {
height: 50px;
overflow: auto;
}
#tableBody {
width: 100%;
}
.column1,
.column2,
.column3,
.column4,
.column5 {
width: 20%
}
But there will be one more problem — the scroll of the body will make the body table width less than header table. So a little bit of javascript
var scrollWidth = $("#tableHeader").width() - $("#tableBody").width();
$("#tableHeader").css("padding-right", scrollWidth);
See also: http://jsfiddle.net/ZNP3q/