My go at a simple, clean table for WebDesignTuts Community Project - see more about it here: http://webdesign.tutsplus.com/articles/workshops/community-project-style-a-simple-data-table/
A Pen by charlie hield on CodePen.
My go at a simple, clean table for WebDesignTuts Community Project - see more about it here: http://webdesign.tutsplus.com/articles/workshops/community-project-style-a-simple-data-table/
A Pen by charlie hield on CodePen.
<table> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Age</th> | |
<th>Weight (kg)</th> | |
<th>Profession</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Carolina Biggleswade</td> | |
<td>23</td> | |
<td>65</td> | |
<td>Jockey</td> | |
</tr> | |
<tr> | |
<td>Harry Sparrowhead</td> | |
<td>34</td> | |
<td>89</td> | |
<td>Trainer</td> | |
</tr> | |
<tr> | |
<td>Marjorie Doors</td> | |
<td>32</td> | |
<td>76</td> | |
<td>Yard Manager</td> | |
</tr> | |
<tr> | |
<td>Earnest Piggington-Smithe</td> | |
<td>18</td> | |
<td>98</td> | |
<td>Groom</td> | |
</tr> | |
</tbody> | |
</table> |
/* | |
Design Inpiration: | |
http://dribbble.com/shots/324834-Pricing-Table | |
*/ |
@import "compass/css3"; | |
@import "compass/css3"; | |
@import url(https://fonts.googleapis.com/css?family=Patua+One|Open+Sans); | |
* { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { | |
background:#353a40; | |
} | |
table { | |
border-collapse: separate; | |
background:#fff; | |
@include border-radius(5px); | |
margin:50px auto; | |
@include box-shadow(0px 0px 5px rgba(0,0,0,0.3)); | |
} | |
thead { | |
@include border-radius(5px); | |
} | |
thead th { | |
font-family: 'Patua One', cursive; | |
font-size:16px; | |
font-weight:400; | |
color:#fff; | |
@include text-shadow(1px 1px 0px rgba(0,0,0,0.5)); | |
text-align:left; | |
padding:20px; | |
@include background-image(linear-gradient(#646f7f, #4a5564)); | |
border-top:1px solid #858d99; | |
&:first-child { | |
@include border-top-left-radius(5px); | |
} | |
&:last-child { | |
@include border-top-right-radius(5px); | |
} | |
} | |
tbody tr td { | |
font-family: 'Open Sans', sans-serif; | |
font-weight:400; | |
color:#5f6062; | |
font-size:13px; | |
padding:20px 20px 20px 20px; | |
border-bottom:1px solid #e0e0e0; | |
} | |
tbody tr:nth-child(2n) { | |
background:#f0f3f5; | |
} | |
tbody tr:last-child td { | |
border-bottom:none; | |
&:first-child { | |
@include border-bottom-left-radius(5px); | |
} | |
&:last-child { | |
@include border-bottom-right-radius(5px); | |
} | |
} | |
tbody:hover > tr td { | |
@include opacity(0.5); | |
/* uncomment for blur effect */ | |
/* color:transparent; | |
@include text-shadow(0px 0px 2px rgba(0,0,0,0.8));*/ | |
} | |
tbody:hover > tr:hover td { | |
@include text-shadow(none); | |
color:#2d2d2d; | |
@include opacity(1.0); | |
} |