Contents
CSS Responsive Table
Responsive Table
CSS Responsive Table: A responsive table will show a horizontal scroll bar if the screen is too small to display the full content:
Responsive Table
A 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 create a responsive table, add a container element (like div) with overflow-x:auto around the table element:
First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
---|---|---|---|---|---|---|---|---|---|---|---|
Sohail | Khan | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Haroon | Khan | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Asad | Khan | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:
Example
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;} </style> </head> <body> <h2>Responsive Table</h2> <p>A 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:</p> <p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p> <div style="overflow-x:auto;"> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> </tr> <tr> <td>Sohail</td> <td>Khan</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>Haroon</td> <td>Khan</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>Asad</td> <td>Khan</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> </table> </div> </body> </html>
Note: In OS X Lion (on Mac), scrollbars are hidden by default and possibly shown when being used (even though “overflow:scroll” is set).
CSS Table Properties
Property | Description |
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
