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>
