add scroll bar to table body

Question

I want to do this as easily as possible with out any additional libraries.

In my very long table I want to add a scrollbar to the <tbody> tag so that the head is always visible but it wont work. can you please help.

fiddle : http://jsfiddle.net/Hpx4L/

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody style="overflow-y:scroll; height:100px;"> <!-- wont work -->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

A table cannot scroll. You need to do some trickery to get a scrolling body. For example; a wrapping div with scroll and an absolute positioned table header. — Bas Slagter
– Bas Slagter, Commented Jul 3, 2013 at 14:35
Possible duplicate of stackoverflow.com/questions/5345390/tabletbody-scrollable and many others — Laurent S.
– Laurent S., Commented Jul 3, 2013 at 14:35
yes I did - I am currently doing it in that method and its not great, so I wanted to ask for help — Hello-World
– Hello-World, Commented Jul 3, 2013 at 14:38

braican · Accepted Answer · 2013-07-03 14:52:52Z

87

you can wrap the content of the <tbody> in a scrollable <div> :

html

....
<tbody>
  <tr>
    <td colspan="2">
      <div class="scrollit">
        <table>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          ...

css

.scrollit {
    overflow:scroll;
    height:100px;
}

see my jsfiddle, forked from yours: http://jsfiddle.net/VTNax/2/

edited Jul 3, 2013 at 14:52

answered Jul 3, 2013 at 14:45

braican

2,2021 gold badge19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nolonar Over a year ago

I can't believe I wasted hours trying to fix my broken layout as a result of using <tbody style="display: block;">, when the solution was as simple as putting <tbody> inside a scrollable <div>. Thanks for your solution!

braican Over a year ago

@myol because the inner table is independent of the outer table, you may need to set an explicit width for the appropriate columns. You'll notice in my jsfiddle that the first <td> element in both the parent and child tables have a width of 200 set. Unfortunately, since the two tables aren't technically related at all, this is the most foolproof way to ensure the columns match up.

braican Over a year ago

@sparkyShorts there shouldn't be any issues with different browser sizes (though I'd imagine some work would be needed at the phone size). Assuming your tables are set up to respond to differing browser sizes, everything should cascade appropriately.

oluckyman Over a year ago

table > div > tbody is invalid HTML syntax

RON2015 Over a year ago

How does this affect accessibility?

|

Noah Heldman · Accepted Answer · 2013-09-25 21:50:01Z

16

These solutions often have issues with the header columns aligning with the body columns, and may not work properly when resizing. I know you didn't want to use an additional library, but if you happen to be using jQuery, this one is really small. It supports fixed header, footer, column spanning (colspan), horizontal scrolling, resizing, and an optional number of rows to display before scrolling starts.

jQuery.scrollTableBody (GitHub)

As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:

$('table').scrollTableBody();

edited Sep 25, 2013 at 21:50

answered Sep 24, 2013 at 5:33

Noah Heldman

6,9044 gold badges42 silver badges42 bronze badges

2 Comments

Sevin7 Over a year ago

This is the only solution I could find that did not require screwing up the HTML/CSS of the table. Thanks!

Giles Roberts Over a year ago

@Sevin7 If you look at the code for this jQuery plugin, it is actually adding extra html / css to your table. So it's screwing up the html / css for you, rather than you having to do it yourself.

Veer Shrivastav · Accepted Answer · 2013-07-03 14:53:36Z

6

This is because you are adding your <tbody> tag before <td> in table you cannot print any data without <td>.

So for that you have to make a <div> say #header with position: fixed;

 header
 {
      position: fixed;
 }

make another <div> which will act as <tbody>

tbody
{
    overflow:scroll;
}

Now your header is fixed and the body will scroll. And the header will remain there.

answered Jul 3, 2013 at 14:53

Veer Shrivastav

5,49611 gold badges58 silver badges84 bronze badges

Comments

GorvGoyl · Accepted Answer · 2017-12-20 18:38:31Z

-1

If you don't want to wrap a table under any div:

table{
  table-layout: fixed;
}
tbody{
      display: block;
    overflow: auto;
}

answered Dec 20, 2017 at 18:38

GorvGoyl

47.2k37 gold badges268 silver badges268 bronze badges

Collectives™ on Stack Overflow

add scroll bar to table body

4 Answers 4

9 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related