title: table row with visible shadow
body: <p>I am looking for a way to achieve this: </p>
  
  <p>set up a table with rows that have space between each others in order to show their box-shadow</p>
  
  <p>I managed to set it up with display:block.
  How ever I couldnt find out how to expand the containing td Elements with percentages in order to be able to use a responsive design</p>
  
  <p>here is the fiddle and the code that should show you what i mean.
  <a href="http://jsfiddle.net/dN5DM/247/" rel="nofollow">http://jsfiddle.net/dN5DM/247/</a></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;Item 1&lt;/td&gt;
          &lt;td&gt;Item 2&lt;/td&gt;
          &lt;td&gt;Item 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;label A &lt;/td&gt;
          &lt;td&gt;longLabel B&lt;/td&gt;
          &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  
  table{
      width : 100%;
      border: 0px;
      margin: 5px;  /* how? margin on both sides visible */
  }
  tr {
      display: block; 
      margin-bottom: 5px;
       -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.75);
      box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.75);
  }
  td {
      height: 80px;
      border: 1px solid red;
      width: 33%;  /* how? expanding the tds to fill the whole row? */
  }
  </code></pre>
  
  <p>​</p>
  
  <p>Thanks for any advice!</p>