Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

Utilize as tags thead, tbody e tfoot para melhor organização da sua tabela. Leia mais sobre isso nesta respostanesta resposta

Para mais informações, veja esta perguntaesta pergunta.

Porém, se quiser fazer com javascript, existem vários códigos prontosvários códigos prontos ensinando como fazer.

Utilize as tags thead, tbody e tfoot para melhor organização da sua tabela. Leia mais sobre isso nesta resposta

Para mais informações, veja esta pergunta.

Porém, se quiser fazer com javascript, existem vários códigos prontos ensinando como fazer.

Utilize as tags thead, tbody e tfoot para melhor organização da sua tabela. Leia mais sobre isso nesta resposta

Para mais informações, veja esta pergunta.

Porém, se quiser fazer com javascript, existem vários códigos prontos ensinando como fazer.

Fonte Link
Randrade
  • 21,9mil
  • 5
  • 53
  • 133

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.