Is there any way to put Scroll on TBODY?

Asked

Viewed 594 times

1

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?

html css table

  • https://answall.com/questions/134380/como-aplicar-scrollbar-somente-no-elemento-tbody-em-uma-tabela-html

1 answer

3


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>

  • Dude, the idea is cool, but the TH would be out of line with TD?

  • @Wallacemaxters Why would it be? It’s misaligned in snnipet because it has no formatting.

  • I kept thinking it could be something from Chrome, but I saw that the linked answer works perfectly :D

Browser other questions tagged html css table

You are not signed in. Login or sign up in order to post.