CSS box shadow on tables

A css box shadow on tables I have found can get in the way, here is an example of what I am yammering on about, first the css and then what I am rambling on about:

-webkit-box-shadow:0px 3px 4px #cccccc;
-mox-box-shadow: 0px 3px 4px #cccccc;
box-shadow: 0px 3px 4px #cccccc;
Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

You will notice box shadow overlaps to the sides of the th elements. This is not what I would like, well still using box shadow you can simply just push the shadow down and set blur to 1px and then just add more box shadow but a lighter shade. To help the older browsers, add a border that’s darker just to evoke the effect of box shadow. So for example here is some CSS:

border-bottom: 1px solid #dddddd;
-webkit-box-shadow: 0px 2px 0px #ECECEC, 0px 3px 0px #F5F5F5;
-mox-box-shadow: 0px 2px 0px #ECECEC, 0px 3px 0px #F5F5F5;
box-shadow: 0px 2px 0px #ECECEC, 0px 3px 0px #F5F5F5;
Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Thought it might be handy for you folk. good luck




Random Posts

  • PHP by reference
    PHP by reference. Well this is something I thought I …