title: Drawing a box around a table and its associated caption
body: <p>I have a table in HTML which has an associated caption. I want to draw a box around these collectively (a single box around the tabular part and the caption), </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>caption {
    border: 2px solid #eeeeee;
  }
  table {
    border: 4px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;table&gt;
    &lt;caption&gt;Table caption&lt;/caption&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;td&gt;Alpha&lt;/td&gt;
        &lt;td&gt;Beta&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know I could wrap the whole table in a DIV and style that, but I am using another program to generate the HTML programmatically (HTML from markdown using pandoc) so I can't control this. Is there any way to make the black box in the example go all around both the table part and the caption?</p>