Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <head> <title>Responsive Table Example</title> <style> body { font-family: sans-serif; margin: 20px; } .table-wrapper { overflow-x: auto; /* Adding a subtle border/shadow to the wrapper to indicate a scrollable area */ box-shadow: 0 0 5px rgba(0,0,0,0.1); } table { width: 100%; /* min-width forces the table to be wide enough to require scrolling on small screens */ min-width: 600px; border-collapse: collapse; } th, td { padding: 12px; text-align: left; border: 1px solid #ddd; /* Prevent text from wrapping so the table demonstrates overflow clearly */ white-space: nowrap; } th { background-color: #333; color: white; } tbody tr:nth-child(even) { background-color: #f9f9f9; } </style> </head> <body> <!-- Resize your browser window (or view on mobile) to see the scrollbar --> <div class="table-wrapper"> <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Address</th> <th>Phone Number</th> <th>Date of Birth</th> <th>Account Status</th> </tr> </thead> <tbody> <tr> <td>Ainsley</td> <td>Walker</td> <td>ainsley.w@example.com</td> <td>555-0198</td> <td>Jan 15, 1990</td> <td>Active</td> </tr> <tr> <td>Kelley</td> <td>Stone</td> <td>k.stone85@example.com</td> <td>555-0234</td> <td>Mar 22, 1985</td> <td>Pending</td> </tr> <tr> <td>Brady</td> <td>Myers</td> <td>brady_m@example.com</td> <td>555-0122</td> <td>Nov 08, 1992</td> <td>Active</td> </tr> </tbody> </table> </div> </body> </html>
