How do I make a table scrollable

Question

Does anyone know a vanilla way of making the body of a table scrollable using only html and css?

The obvious solution

tbody {
    height: 200px;
    overflow-y: scroll;
}

does not work.

Wouldnt this be the obvious use of tables?

am I doing something wrong?

Movie

Answer 1

You need to declare a height first, else your table will expand to the according width of its content.

table{
   overflow-y:scroll;
   height:100px;
   display:block;
}

EDIT: after clarifying your problem I edited the fiddle: check out this Example or that way. It's rather hacky and not guaranteed to work crossbrowser but might work for your case.

Promisee

what happens to the thead part of the table? – Movie

Using display:block would work, but generally wouldn't be recommended as the browser would no longer consider it to be a table. – Tailstock

The examble should solve this link --and I want the header to stay in place – Movie

@MartinKristiansen you mean, you want to scroll the body while the head stays fixed? You can't achieve with pure css. – Promisee

@Christoph: Thats what I wanna do -- and it would seem like that was exactly what tables were made for -- but from the looks of it, I think your right. – Movie

I like the fix, except from the static td width, is there a way to make that dynamic? – Movie

@MartinKristiansen since the table-properties are destroyed with declaring display:block the th and td lose their coupling and thus need fixed widths, unfortunately. Just try to remove them and you will see what I mean. – Promisee

You need javascript to achieve the effect you want. I guess there are quite some plugins out there which get you the desired result. – Promisee

Answer 2

You can't do that with a table. Wrap the table with a div a give it something like:

div.wrapper {
    overflow:hidden;
    overflow-y: scroll;
    height: 100px; // change this to desired height
}

Tailstock

This should work. Since increasing the height of the table stretches the row alignment. – Noblewoman

Answer 3

You can wrap the table with a parent div and make him scrollable:

.div_before_table {
    overflow:hidden;
    overflow-y: scroll;
    height: 500px;
}

And to keep the table header sticky you can add a fixed class:

.th.fixed {
    top: 0;
    z-index: 2;
    position: sticky;
    background-color: white;
 }

You can see the example here (click on Show Code Snippet and then Run Code Snippet) :

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #ddd;
}


/* The scrollable part */

.scrollable {
  height: 150px;
  overflow-y: scroll;
  border-bottom: 1px solid #ddd;
}

th {
  position: sticky;
  background-color: white;
  z-index: 2;
  top: 0;
}

<div class="scrollable">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

Decadence

This is not accurate enough. I am using a gradient for the background-color of the table head. Using th makes it to repeat the color from left to right for each column of the table head. – Appellee

This code works for me. Thanks. – Handicapper

Answer 4

Do you want somthing like this ?

Pure CSS Scrollable Table with Fixed Header (1)

http://anaturb.net/csstips/sheader.htm

http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

Flirt

Yep except that I still have to make the width of the cols in the table static. I really really dont wanna have to decide the width before runtime. – Movie

and the second solution is a hack if I ever saw one. without the width tag set, there is absolutely no garantie that the coloms will align with the headers – Movie

A similar question has been asked here: #10839200 – Flirt

And this code guy suggests to set the width at server side in case you need to set it dynamically. cssbakery.com/2010/12/… – Flirt