Is there any way to put Scroll on TBODY?

Question

I have a table where the amount of items listed on TBODY is quite large and I would like to add a scroll, setting the maximum size of the TBODY at 500px.

I tried to do this, but it didn’t work (I’m using Google Chrome)

#scroll{
   max-height: 100px;
   overflow: auto;
}

<table>
  <tbody id="scroll">
     <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
        <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
        <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
  
  </tbody>
</table>

By doing something like DIV, works perfectly:

#scroll{
   max-height: 100px;
   overflow: auto;
}

<div id="scroll">
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>
  <div>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
      <span>Valor</span>
  </div>

</div>

How can I define a overflow with scroll inside a TBODY?

Answer 1

Can use overflow-y: auto and overflow-x: hidden.

thead, tbody { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;    /* Scroll vertical             */
    overflow-x: hidden;  /* Desativar scroll horizontal */
}

<table class="table">
  <thead>
    <th width="30px">A</th>
    <th width="30px">B</th>
    <th width="30px">C</th>
    <th width="30px">D</th>
    <th width="30px">E</th>
  </thead>
  <tbody id="scroll">
     <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
        <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
        <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
    <tr>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
        <td>Valor</td>
    </tr>
  
  </tbody>
</table>