Is there any way to put Scroll on TBODY? [duplicate]

Question

Is there any way to put Scroll on TBODY? [duplicate]

Navigation

#1 by (2 votes)

1

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

I tried to do this but it did not 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>

But 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 set a overflow with scroll within a TBODY ?

html css table

asked by anonymous 13.11.2017 / 13:23

1 answer

Using C # 6.0 on VS2010 Is it possible to collect an html source code using python?

score 2 · Accepted Answer

You 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>