You can wrap the table in a div and give the max-height and overflow: scroll to that div
.pane {
display: inline-block;
overflow-y: scroll;
max-height: 200px;
}
table {
text-align: center;
margin: auto;
}<div class="pane">
<table>
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
</table>
</div>JSFiddle
There’s another solution at Pure CSS Scrollable Table with Fixed Header without a wrapper div, but with an additional thead and tbody around the rows. You set the thead and tbody to display: block and give a max-height and overflow-y to the tbody. This lets the header stay in place when scrolling the rows. But as always, it comes with a price tag. You have to specify the column widths, because the thead and tbody are out of sync due to the display: block
thead {
display: block;
}
tbody {
display: block;
overflow-y: scroll;
max-height:200px;
}
thead th, tbody td {
width: 70px;
}<table>
<thead>
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
</thead>
<tbody>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
</tbody>
</table>JSFiddle
Update:
In the source code of that site, there are comments about IE and IE6. It sets
thead tr {
position: relative
}
and defines the width of the table with
table {
float: left;
width: 740px
}
Wheter this is relevant for IE10, I don’t know.