I am in need of an HTML page that includes a header and a table with a non-scrollable feature. The scroll should only be available for the contents within the table.
For example:
<html>
<body>
<h1>header</h1>
<h1>header2</h1>
<table>
<thead>
<tr>
<th>name</th>
</tr>
<tr>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Venkat</td>
</tr>
<tr>
<td>bangalore</td>
</tr>
//this part will be repeating
</tbody>
</table>
</body>
</html>
I specifically want the content in the table body to be the only part that is scrollable.
I have looked at other resources such as How do you create non scrolling div at the top of an HTML page without two sets of scroll bars
However, I am unable to use a div to contain just headers and a table header..
I have created a fiddle with a similar situation to mine. Feel free to check it out http://jsfiddle.net/VenkateshManohar/bU7NN/