Simple CSS3 based tables that come in three different colors

table list design

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">&nbsp;</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">&nbsp;</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>


Download / Demo

You may also like...