How to set a scroll in a table element

Question

I have a table:

<table class="list-table">
  <thead><tr><th>header</th></tr></thead>
  <tbody>

   <tr><td>Single row of glorious table content</td></tr>  // Repeat me x100

  </tbody>
</table>

This table is wrapped in a div to give it a fixed height:

   <div class="col-sm-3 col-sm-offset-9" style="top:80px; bottom:20px;">

   <table>
   ...
   </table>

   </div>

Now the question: How can I use overflow:auto (or equivalent) to have the tbody contents scroll if the TR repeats exceed this fixed height?

*Note I want only the tbody (or tr contents in the tbody) to scroll, not the theador its contents *

*EDIT: UPDATE * For those interested, I ended up splitting this into two identical tables, then wrapping the table with the tbody in a overflow:auto and aligning the thead separately with a position:fixed

no you cant, you cant make tbody content scroll without changing its display property, which is a bad idea. — Moazzam Khan, Sep 06 '13 at 19:58
you can try YUI datatable with scrollable body - http://developer.yahoo.com/yui/examples/datatable/dt_fixedscroll.html — Moazzam Khan, Sep 06 '13 at 19:59
@alias51 This may help: http://stackoverflow.com/a/17380697/1725764 — Hashem Qolami, Sep 06 '13 at 20:01
changing tbody display property will get your a scroll but, your table cell widths will mess up, you can try and see. `display:block` and `overflow:auto` — Moazzam Khan, Sep 06 '13 at 20:02

Naveen Kumar Alone · Answer 1 · 2013-09-06T20:14:55.947

1

I think this will help you a lot

In your html

    <table>
<thead><tr><th>header</th></tr></thead>
  <tbody>
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
  </tbody>
</table>

And in your CSS

table {width:100%; border:1px solid #000000;}
thead {background-color:#000268;color:#FFFFFF;text-align:center; position:fixed; top:0px;}
thead th { height:50px;width:1000px; text-align:center;border-width: 1px;border-style: outset;}
tbody {color:#000000;text-align:center; height:150px; overflow: scroll; margin-top:00px;}
tbody td { height:60px; border-width: 1px;border-style: outset;}

Fiddle

edited Sep 06 '13 at 20:14

answered Sep 06 '13 at 19:59

Naveen Kumar Alone

7,536
5
36
57

Body does not align with head – Moazzam Khan Sep 06 '13 at 20:06
Also, the head covers some of the body. – Cruncher Sep 06 '13 at 20:12
I think the issue here is the height is set by a parent element, which means this approach wont work? – alias51 Sep 06 '13 at 20:16

beercodebeer · Answer 2 · 2013-09-06T20:18:37.490

Probably something like this:

<table class="list-table">
  <thead><tr><th>header</th></tr></thead>
  <tbody>
    <tr>
      <td>
        <div class="col-sm-3 col-sm-offset-9" style="top:80px; bottom:20px; height:400px;overflow-y:auto;">
          <table>
            <tr><td>Single row of glorious table content</td></tr>  // Repeat me x100
          </table>
        </div>
      </td>
    </tr>
  </tbody>

Of course, if you have multiple tds, you may have to manually set all their widths to keep them properly aligned.

Ugly fiddle demo

Cruncher · Answer 3 · 2013-09-06T20:04:54.203

0

You could wrap it in a div.

    <table>
       <thead>...</thead>
       <tbody><tr><td>
       <div style = "overflow:auto">
         //table without the header here
       </div>
       </td></tr></tbody>
    </table>

If the innertable has no margins or padding or anything of that nature, it should look like part of the original table.

edited Sep 06 '13 at 20:04

answered Sep 06 '13 at 19:59

Cruncher

7,641
1
31
65

That would scroll the thead content – alias51 Sep 06 '13 at 20:00
Thanks but that doesn't appear to work. Is it semantically correct to have a div in a table but outside a cell? – alias51 Sep 06 '13 at 20:05
@alias51 the div is in a cell. The table has exactly 1 cell that contains the div – Cruncher Sep 06 '13 at 20:06

score 0 · Answer 4 · answered Sep 06 '13 at 20:00

0

add style for your tbody there are overflow: auto, overflow-x:scroll, overflow-y:scroll

user whatever suits you best. if you use tbody a fixed height only tbody will scroll not the thead.

answered Sep 06 '13 at 20:00

Biswajit Maji

869
13
23

@Biswajit Did you ever do it before? – Moazzam Khan Sep 06 '13 at 20:04

How to set a scroll in a table element

4 Answers4