Simple CSS3 based tables that come in three different colors
CSS Table Layout (or should we say layouts) simple CSS3 based tables that come in three different colors; red, green and blue. Each table features a variation of rows with same data, but ultimately it comes down to yourself and what kind of data you want to display with your tables, this is just a template that you can use to make it all happen and to enable mobile access to these tables.
Below is the code that have used for the above tables.
<html> <head> <title>Table list design</title> <style type="text/css"> .wrapper { margin: 0 auto; padding: 40px; max-width: 800px; } .table { margin: 0 0 40px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table; } .table .row { display: table-row; background: #f6f6f6; } .table .row .cell{ padding: 6px 12px; display: table-cell; } .table .row:nth-of-type(odd) { background: #e9e9e9; } .table .row.header { font-weight: 900; color: #ffffff; background: #ea6153; } .row.header.green { background: #27ae60; } .row.header.blue { background: #2980b9; } @media screen and (max-width: 580px){ .table { display: block; } .table .row { padding: 8px 0; display: block; } .table .row .cell { padding: 2px 12px; display: block; } } .clr{ clear:both; } </style> </head> <body> <div class="wrapper"> <div class="table"> <div class="row header"> <div class="cell"> Name</div> <div class="cell"> Age </div> <div class="cell">Occupation</div><div class="cell">Location</div> </div> <div class="row"> <div class="cell">Luke Peters</div> <div class="cell">25</div><div class="cell">Freelance Web Developer </div><div class="cell">Brookline, MA</div> </div> <div class="row"> <div class="cell">Joseph Smith</div> <div class="cell">24</div><div class="cell">Project Manager </div><div class="cell">Somerville, MA</div> </div> <div class="row"> <div class="cell">Maxwell Johnson</div> <div class="cell">28</div><div class="cell">UX Architect & Designer </div><div class="cell">Brookline, MA</div> </div> <div class="row"> <div class="cell">Harry Harrison</div> <div class="cell">26</div><div class="cell">Front-End Developer </div><div class="cell">Brookline, MA</div> </div> </div> <div class="clr"> </div> <div class="table"> <div class="row header green"> <div class="cell"> Name</div> <div class="cell"> Age </div> <div class="cell">Occupation</div><div class="cell">Location</div> </div> <div class="row"> <div class="cell">Luke Peters</div> <div class="cell">25</div><div class="cell">Freelance Web Developer </div><div class="cell">Brookline, MA</div> </div> <div class="row"> <div class="cell">Joseph Smith</div> <div class="cell">24</div><div class="cell">Project Manager </div><div class="cell">Somerville, MA</div> </div> <div class="row"> <div class="cell">Maxwell Johnson</div> <div class="cell">28</div><div class="cell">UX Architect & Designer </div><div class="cell">Brookline, MA</div> </div> <div class="row"> <div class="cell">Harry Harrison</div> <div class="cell">26</div><div class="cell">Front-End Developer </div><div class="cell">Brookline, MA</div> </div> </div> <div class="clr"> </div> <div class="table"> <div class="row header blue"> <div class="cell"> Name</div> <div class="cell"> Age </div> <div class="cell">Occupation</div><div class="cell">Location</div> </div> <div class="row"> <div class="cell">Luke Peters</div> <div class="cell">25</div><div class="cell">Freelance Web Developer </div><div class="cell">Brookline, MA</div> </div> <div class="row"> <div class="cell">Joseph Smith</div> <div class="cell">24</div><div class="cell">Project Manager </div><div class="cell">Somerville, MA</div> </div> <div class="row"> <div class="cell">Maxwell Johnson</div> <div class="cell">28</div><div class="cell">UX Architect & Designer </div><div class="cell">Brookline, MA</div> </div> <div class="row"> <div class="cell">Harry Harrison</div> <div class="cell">26</div><div class="cell">Front-End Developer </div><div class="cell">Brookline, MA</div> </div> </div> </div> </body> </html>