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.
Created
May 5, 2019 16:16
-
-
Save syui/a8fb85bc55afb40246526e378184ff87 to your computer and use it in GitHub Desktop.
Crisp table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Design Inpiration: | |
| http://dribbble.com/shots/324834-Pricing-Table | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment