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: [css] -webkit-box-shadow:0px 3px 4px #cccccc; -mox-box-shadow: 0px 3px 4px #cccccc; box-shadow: 0px 3px 4px #cccccc; [/css]
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: [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; [/css]
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

Monthly Archives: September 2014

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: Number First Name Last Name Points 1 Eve Jackson 94 2 John Doe 80 3 Adam Johnson 67 4

Read more