Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; } @media screen and (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; width: 100%; } thead { display: none; } tr { margin-bottom: 15px; } td { text-align: right; padding-left: 50%; position: relative; } td:before { content: attr(data-label); position: absolute; left: 0; width: 50%; padding-left: 10px; font-weight: bold; text-align: left; } } </style> <body> <table border="1"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </tbody> </table> </body> </html>
console output