How Do I Make A Table Scrollable

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

Solution 1:

You need to declare a height first, else your table will expand to the according with of it's 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 quaranteed to work crossbrowser but might work for your case.

Solution 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
}

Solution 3:

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

.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;
 }

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;
}

<divclass="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>

Solution 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