Antes de tudo que tal organizar a sua tabela?
Utilize as tags thead, tbody e tfoot para melhor organização da sua tabela. Leia mais sobre isso nesta resposta
Já a resposta que procura, seria algo parecido com isso?
.mytable {
border: 0;
border-collapse: collapse;
width: 100%;
}
.mytable tr {
display: flex;
}
.mytable td {
padding: 3px;
flex: 1 auto;
border: 1px solid #aaa;
width: 1px;
word-wrap: break;
}
.mytable thead th {
flex: 1 auto;
display: block;
border: 1px solid #000;
}
.mytable tbody {
display: block;
width: 100%;
overflow-y: auto;
height: 200px;
}
<table border="1" class="mytable">
<thead>
<tr class="header">
<th rowspan="2">H1</th>
<th colspan="3">H2</th>
<th rowspan="2">H3</th>
<th rowspan="2">H4</th>
</tr>
<tr class="header">
<th>H2.1</th>
<th>H2.2</th>
<th>H2.3</th>
</tr>
</thead>
<tbody>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I2 H1</td>
<td>I2 H2</td>
<td>I2 H3</td>
<td>I2 H4</td>
<td>I2 H5</td>
<td>I2 H6</td>
</tr>
<tr>
<td>I3 H1</td>
<td>I3 H2</td>
<td>I3 H3</td>
<td>I3 H4</td>
<td>I3 H5</td>
<td>I3 H6</td>
</tr>
<tr>
<td>I4 H1</td>
<td>I4 H2</td>
<td>I4 H3</td>
<td>I4 H4</td>
<td>I4 H5</td>
<td>I4 H6</td>
</tr>
<tr>
<td>I5 H1</td>
<td>I5 H2</td>
<td>I5 H3</td>
<td>I5 H4</td>
<td>I5 H5</td>
<td>I5 H6</td>
</tr>
<tr>
<td>I6 H1</td>
<td>I6 H2</td>
<td>I6 H3</td>
<td>I6 H4</td>
<td>I6 H5</td>
<td>I6 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
<tr>
<td>I1 H1</td>
<td>I1 H2</td>
<td>I1 H3</td>
<td>I1 H4</td>
<td>I1 H5</td>
<td>I1 H6</td>
</tr>
</tbody>
<tfooter>
<tr class="footer">
<th>FH1</th>
<th>FH2</th>
<th>FH3</th>
<th>FH4</th>
<th>FH5</th>
<th>FH6</th>
<tr>
</tfooter>
</table>
Se for isso, a linha que realmente faz o trabalho é essa:
.mytable tbody {
display: block;
width: 100%;
overflow-y: auto;
height: 200px;
}
Onde você seta o height
e o overflow-y
.
Para mais informações, veja esta pergunta.
Bom, isso é feito apenas com CSS e gera um segundo scroll.
Porém, se quiser fazer com javascript, existem vários códigos prontos ensinando como fazer.