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.

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

If you want to add shadow to thead without using div, try the following code

   table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    table thead{
    display:block;
    position:relative;
    box-shadow: 0px 1px 3px 0px #cccccc;
    }
    
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    
    table tr{
    display:table;
    table-layout:fixed;
    width:100%;
    }
    

    <table>
    <thead>
      <tr>
        <th>Company</th>
        <th>Owner</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alfred Trading</td>
        <td>Alfred Thomas</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Australia</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helena Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus</td>
        <td>John Cook</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody>  
    </table>