How to Add Scroll Bars to HTML Tables Using Cascading Style Sheets

Don't let your Web page's tables drive you to a rage.

Tables are a useful tool for displaying data in spreadsheet format on a Web page. If you have a table that must be a certain size which also contains a lot of data, the size restrictions will often be ignored in favor of displaying all of the data. This problem can be solved with the CSS overflow property, which allows you to create scroll bars within a table if they are needed.

Instructions

1. Open the Web page that you want to modify in a text or HTML editing program.

2. Navigate to the table to which you want to add scroll bars.

3. Add the following code just before the <table> tag: <div style="height:150px; width:100px; overflow: auto;">

4. Modify the height and width to the size that you want your table displayed, in pixels.

5. Remove any height="xx" or width="xx" data from the <table> command, which may interfere with the CSS.

6. Save the file and view it in a Web browser. Your table will be displayed at the size that you have specified. If there is data extending beyond that size, vertical or horizontal scroll bars will automatically be added.

References

• W3 Schools: CSS overflow Property
• SSI Developer: Non-Scrolling Table Header
• CSS-Tricks.com: "The CSS Overflow Property"; Chris Coyier; 2009