title: Table with border and shadow around
body: <p>This is the code that I have so far: <a href="http://jsfiddle.net/LRKXD/1941/" rel="nofollow noreferrer">http://jsfiddle.net/LRKXD/1941/</a></p>
  
  <p>I want the shadow to be around the whole table, how do I do it?</p>
  
  <p>I want the border to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/x4mL8.jpg" alt="shadow around"></p>
  
  <p><strong>Update:</strong></p>
  
  <p>Already I was able to do it, this is my solution:
  I wrapped the table in a div and to that div I added the border and shadow around.
   <a href="http://jsfiddle.net/LRKXD/2050/" rel="nofollow noreferrer">http://jsfiddle.net/LRKXD/2050/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              background-color: rgba(136, 188, 200, 1);
          }
  
          table {
              margin-left: 0px;
              margin-rigth: 5px;
              margin-top: 0px;
              margin-bottom: 5px;
              width: 100%;
              heigth: 100%;
              border: 1px solid #333;
              padding: 0px;
              border-collapse: separate;
              border-spacing: 0;
              -moz-border-radius-topleft: 7px;
              -webkit-border-top-left-radius: 7px;
              border-top-left-radius: 7px;
              -moz-border-radius-topright: 7px;
              -webkit-border-top-right-radius: 7px;
              border-top-right-radius: 7px;
              -moz-border-radius-bottomleft: 7px;
              -webkit-border-bottom-left-radius: 7px;
              border-bottom-left-radius: 7px;
              -moz-border-radius-bottomright: 7px;
              -webkit-border-bottom-right-radius: 7px;
              border-bottom-right-radius: 7px;
          }
  
          td, th {
              text-align: center;
              vertical-align: middle;
              background-color: #fff;
              border: none;
              padding: 15px;
              font-weight: 500;
          }
  
          td + td, th + th {
              border-left: 1px solid #999;
          }
  
          th, tr td {
              border-bottom: 1px solid #999;
          }
  
          tfoot td {
              border-bottom: none;
          }
  
          td:first-child {
              border-left: none;
          }
  
          td:last-child {
              border-right: none;
          }
  
          thead + tr td, tr + tr td, tfoot td {
              border-top: none;
          }
  
          thead th:first-child {
              -moz-border-radius-topleft: 7px;
              -webkit-border-top-left-radius: 7px;
              border-top-left-radius: 7px;
              border-left: none;
          }
  
          thead th:last-child {
              -moz-border-radius-topright: 7px;
              -webkit-border-top-right-radius: 7px;
              border-top-right-radius: 7px;
              border-right: none;
          }
  
          tfoot td:first-child {
              -moz-border-radius-bottomleft: 7px;
              -webkit-border-bottom-left-radius: 7px;
              border-bottom-left-radius: 7px;
          }
  
          tfoot td:last-child {
              -moz-border-radius-bottomright: 7px;
              -webkit-border-bottom-right-radius: 7px;
              border-bottom-right-radius: 7px;
          }
  
          .pre-table {
              margin: 30px auto;
              width: 200px;
              padding-left: 0px;
              padding-right: 5px;
              padding-top: 0px;
              padding-bottom: 0px;
              box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 4px 20px rgba(0, 0, 0, 0.92);
              -moz-border-radius-topleft: 7px;
              -webkit-border-top-left-radius: 7px;
              border-top-left-radius: 7px;
              -moz-border-radius-topright: 7px;
              -webkit-border-top-right-radius: 7px;
              border-top-right-radius: 7px;
              -moz-border-radius-bottomleft: 7px;
              -webkit-border-bottom-left-radius: 7px;
              border-bottom-left-radius: 7px;
              -moz-border-radius-bottomright: 7px;
              -webkit-border-bottom-right-radius: 7px;
              border-bottom-right-radius: 7px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="pre-table"&gt;
      &lt;table cellspacing="0" cellpadding="0"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;1.1&lt;/th&gt;
              &lt;th&gt;1.2&lt;/th&gt;
              &lt;th&gt;1.3&lt;/th&gt;
              &lt;th&gt;1.4&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;2.1&lt;/td&gt;
              &lt;td&gt;2.2&lt;/td&gt;
              &lt;td&gt;2.3&lt;/td&gt;
              &lt;td&gt;2.4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;3.1&lt;/td&gt;
              &lt;td&gt;3.2&lt;/td&gt;
              &lt;td&gt;3.3&lt;/td&gt;
              &lt;td&gt;3.4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;4.1&lt;/td&gt;
              &lt;td&gt;4.2&lt;/td&gt;
              &lt;td&gt;4.3&lt;/td&gt;
              &lt;td&gt;4.4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;td&gt;5.1&lt;/td&gt;
              &lt;td&gt;5.2&lt;/td&gt;
              &lt;td&gt;5.3&lt;/td&gt;
              &lt;td&gt;5.4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Thanks you!</strong></p>