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>
