The 4 simple and beautiful responsive table in html and css
List of the four most simple beautiful HTML tables built with pure css and no javascript table
1# W3schools

<!doctype html> <html> <head> <style> /* to remove table border */ table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid black; vertical-align: bottom; } th, td { height: 50px; padding: 15px; text-align: left; } tr:hover {background-color: #f5f5f5;} tr:nth-child(even) {background-color: #f2f2f2;} th { background-color: #4CAF50; color: white; } div{ overflow-x:auto; } </style> </head> <body> <div style="overflow-x:auto;"> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr class="alt"> <td>Königlich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </div> </body> </html>
2# CSStrick

<!doctype html> <html> <head> <style> body{ padding: 1em; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAQElEQVQIW2P89OvDfwYo+PHjJ4zJwMHBzsAIk0SXAKkCS2KTAEu++vQSbizIKGQAl0SXAJkGlsQmAbcT2Shk+wH0sCzAEOZW1AAAAABJRU5ErkJggg==); } a{ color: #739931; } .page{ max-width: 60em; margin: 0 auto; } table th, table td{ text-align: left; } table.layout{ width: 100%; border-collapse: collapse; } table.display{ margin: 1em 0; } table.display th, table.display td{ border: 1px solid #B3BFAA; padding: .5em 1em; } table.display th{ background: #D5E0CC; } table.display td{ background: #fff; } table.responsive-table{ box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); } @media (max-width: 30em){ table.responsive-table{ box-shadow: none; } table.responsive-table thead{ display: none; } table.display th, table.display td{ padding: .5em; } table.responsive-table td:nth-child(1):before{ content: 'Number'; } table.responsive-table td:nth-child(2):before{ content: 'Name'; } table.responsive-table td:nth-child(1), table.responsive-table td:nth-child(2){ padding-left: 25%; } table.responsive-table td:nth-child(1):before, table.responsive-table td:nth-child(2):before{ position: absolute; left: .5em; font-weight: bold; } table.responsive-table tr, table.responsive-table td{ display: block; } table.responsive-table tr{ position: relative; margin-bottom: 1em; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); } table.responsive-table td{ border-top: none; } table.responsive-table td.organisationnumber{ background: #D5E0CC; border-top: 1px solid #B3BFAA; } table.responsive-table td.actions{ position: absolute; top: 0; right: 0; border: none; background: none; } } </style> </head> <body> <div class="page"> <h1>A responsive table</h1> <table class="layout display responsive-table"> <thead> <tr> <th>Number</th> <th colspan="2">Name</th> </tr> </thead> <tbody> <tr> <td class="organisationnumber">140406</td> <td class="organisationname">Stet clita kasd gubergren, no sea takimata sanctus est</td> <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a> <a href="?" class="remove-item" title="Remove">Remove</a> </td> </tr> <tr> <td class="organisationnumber">140412</td> <td class="organisationname">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</td> <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a> <a href="?" class="remove-item" title="Remove">Remove</a> </td> </tr> <tr> <td class="organisationnumber">140404</td> <td class="organisationname">Vel illum dolore eu feugiat nulla facilisis at vero eros</td> <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a> <a href="?" class="remove-item" title="Remove">Remove</a> </td> </tr> <tr> <td class="organisationnumber">140408</td> <td class="organisationname">Iusto odio dignissim qui blandit praesent luptatum zzril delenit</td> <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a> <a href="?" class="remove-item" title="Remove">Remove</a> </td> </tr> <tr> <td class="organisationnumber">140410</td> <td class="organisationname"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam </td> <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a> <a href="?" class="remove-item" title="Remove">Remove</a> </td> </tr> </tbody> </table> </div> </body> </html>
3# divtable

<!doctype html> <html> <head> <style> table.blueTable { border: 1px solid #1C6EA4; background-color: #EEEEEE; width: 100%; text-align: left; border-collapse: collapse; } table.blueTable td, table.blueTable th { border: 1px solid #AAAAAA; padding: 3px 2px; } table.blueTable tbody td { font-size: 13px; } table.blueTable tr:nth-child(even) { background: #D0E4F5; } table.blueTable thead { background: #1C6EA4; background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%); background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%); background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%); border-bottom: 2px solid #444444; } table.blueTable thead th { font-size: 15px; font-weight: bold; color: #FFFFFF; border-left: 2px solid #D0E4F5; } table.blueTable thead th:first-child { border-left: none; } table.blueTable tfoot { font-size: 14px; font-weight: bold; color: #FFFFFF; background: #D0E4F5; background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); border-top: 2px solid #444444; } table.blueTable tfoot td { font-size: 14px; } table.blueTable tfoot .links { text-align: right; } table.blueTable tfoot .links a{ display: inline-block; background: #1C6EA4; color: #FFFFFF; padding: 2px 8px; border-radius: 5px; } </style> </head> <body> <table class="blueTable"> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr> </thead> <tfoot> <tr> <td colspan="4"> <div class="links"><a href="#">«</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">»</a></div> </td> </tr> </tfoot> <tbody> <tr> <td>cell1_1</td> <td>cell2_1</td> <td>cell3_1</td> <td>cell4_1</td> </tr> <tr> <td>cell1_2</td> <td>cell2_2</td> <td>cell3_2</td> <td>cell4_2</td> </tr> <tr> <td>cell1_3</td> <td>cell2_3</td> <td>cell3_3</td> <td>cell4_3</td> </tr> <tr> <td>cell1_4</td> <td>cell2_4</td> <td>cell3_4</td> <td>cell4_4</td> </tr> </tbody> </table> </body> </html>
4# mozilla

<!doctype html> <html> <head> <style> /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'Rock Salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border: 3px solid purple; } tbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e495e4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff33cc; } caption { font-family: 'Rock Salt', cursive; padding: 20px; font-style: italic; caption-side: bottom; color: #666; text-align: right; letter-spacing: 1px; } </style> </head> <body> <table> <caption>A summary of the UK's most famous punk bands</caption> <thead> <tr> <th scope="col">Band</th> <th scope="col">Year formed</th> <th scope="col">No. of Albums</th> <th scope="col">Most famous song</th> </tr> </thead> <tbody> <tr> <th scope="row">Buzzcocks</th> <td>1976</td> <td>9</td> <td>Ever fallen in love (with someone you shouldn't've)</td> </tr> <tr> <th scope="row">The Clash</th> <td>1976</td> <td>6</td> <td>London Calling</td> </tr> ... some rows removed for brevity <tr> <th scope="row">The Stranglers</th> <td>1974</td> <td>17</td> <td>No More Heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">Total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> </body> </html>