How to Add Scroll to Cells in a Table

Hi there!

So, while I was creating a table for a website that I’m making for class I realized that because I had so much information to put in each cell, that consequently stretched out each cell to a length that was not so aesthetically pleasing, as seen here:



See how “Content Licensing for Users” is waaay too long? I wanted to make all my table cells the same length without making cells with less information feel out of place. I figured that the best way to do this would be to choose a predetermined length and insert a scrollbar with each individual cell that went on beyond that length.

In order to do this, you’ll need to create a new div class. I called mine ‘privacy’ here. The CSS declaration should read as follows:



The max-height and max-width can be amended to match whatever dimensions you need in order to meet the requirements of your page. Additionally, you should make sure that even if you’re looking to add just a vertical scroll (to cover your overflow-y), you still need to list your horizontal scroll as (overflow-x) as hidden.

From there you’ll need to go into the html for the table and add your div class to the appropriate table cells. The div class should go within the table cell as follows:


Always remember to close your div tag! 

That’s it! You now officially have the ability to scroll through a table cell’s text while keeping your website looking clean! When you’ve added the appropriate declarations/elements the final table with the scroll bar will look as follows:

ImageThe scroll bar will only appear if you hover over a table cell that has the ability to scroll.

Questions? Comments? Let me know below!

By: Julia Eisler


~ by juliaeisler on March 9, 2014.

%d bloggers like this: