How to Create Responsive Tables
A Beginners Solution
This responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:
To make table responsive, add a container element (like div) with overflow-x:auto around the table element:
<div style="overflow-x: auto;"> <table> </div>
This isn't the best procedure for making a table responsive, but is probably one of the easiest methods for beginner level.
Employee Sales Yr 2024
Item #78924
| Last Name | E-ID | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Total |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Smith | #31 | 51 | 62 | 31 | 70 | 24 | 92 | 84 | 0 | 50 | 21 | 51 | 41 | 577 |
| Jackson | #42 | 15 | 20 | 7 | 11 | 25 | 17 | 0 | 31 | 21 | 14 | 22 | 11 | 194 |
| Brown | #53 | 67 | 63 | 56 | 71 | 0 | 72 | 63 | 68 | 81 | 56 | 71 | 53 | 721 |
Get the Actual Code for this responsive table.
Free Tools and Resources
Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.
Have you tried our FREE Responsive Design template kit? Download Template #402 - 6 Page Kit