Search code examples
csscompass-sasscss-tables

Drawing box shadow around table thead

As you can see in this fiddle, http://jsfiddle.net/S8Bne/64/, I am trying to draw a box shadow around the table (just the outside out it). The approach that I've taken is to create a div with slightly larger height than the thead area and give it a box shadow. However, I can't quite get it positioned properly. How can I do so?

Any solutions are welcome.

Solution

  • This is happening because your thead is not inside the div.

    I added some height to the div to show...

    Problem: http://jsfiddle.net/jasongennaro/S8Bne/54/

    Add this

    -webkit-box-shadow:#8A0000 2px 2px 10px;
box-shadow:#8A0000 2px 2px 10px;

    to 

    .geniusPicks table tr#picksHeading th

    And it works.

    Working Example: http://jsfiddle.net/jasongennaro/S8Bne/55/

    So no need for the div