Html Table with Fixed Header and Scrollable Body

HTML

<div style="margin: 0; padding:0px; border-collapse: collapse; width: 728px; height: 135px; overflow: hidden; border: 1px solid #ccc;">
<table style="margin: 0; padding:6px 10px; border-collapse: collapse; color: White; width: 728px; height: 20px; text-align: left; background-color: #0065ab;">
<colgroup>
<col width="242px"/>
<col width="242px"/>
<col width="242px"/>
</colgroup>
<tbody>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<th style="margin: 0; padding:6px 10px; border-collapse: collapse;">Column 1</th>
<th style="margin: 0; padding:6px 10px; border-collapse: collapse;">Column 2</th>
<th style="margin: 0; padding:6px 10px; border-collapse: collapse;">Column 3</th>
</tr>
</tbody>
</table>
<div style="margin: 0; padding:0px; border-collapse: collapse; width: 728px; height: 119px; overflow: auto;">
<table style="margin: 0; padding:0px; border-collapse: collapse; width: 726px;">
<colgroup>
<col width="242px"/>
<col width="242px"/>
<col width="242px"/>
</colgroup>
<tbody style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row A-1</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row A-2</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row A-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row B-1</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row B-2</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row B-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row C-1</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row C-2</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row C-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row D-1</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row D-2</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row D-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row E-1</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row E-2</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row E-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row F-1</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row F-2</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row F-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row G-1</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row G-2</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row G-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row H-1</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row H-2</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row H-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row I-1</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row I-2</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row I-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row J-1</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row J-2</td>
<td bgcolor="#f3f3f3" style="padding:6px 10px; border: 1px solid #ccc;">Row J-3</td>
</tr>
<tr style="margin: 0; padding:6px 10px; border-collapse: collapse;">
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row K-1</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row K-2</td>
<td bgcolor="#ddd" style="padding:6px 10px; border: 1px solid #ccc;">Row K-3</td>
</tr>
</tbody>
</table>
</div>
</div>

Example

Click to DEMO