title: Add margin to Bootstrap 3 table?
body: <p>I have a Bootstrap 3 table inside a div. It is defined like this:</p>
  
  <pre><code>&lt;div id="todays-table"&gt;
  &lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Train Number&lt;/th&gt;
  
              &lt;th&gt;Status&lt;/th&gt;
  
              &lt;th&gt;Last Attempt&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          &lt;tr class="danger"&gt;
              &lt;td&gt;2001&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2005&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="success-row"&gt;
              &lt;td&gt;2006&lt;/td&gt;
  
              &lt;td&gt;1&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2007&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2008&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2009&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2010&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2011&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2012&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td&gt;2013&lt;/td&gt;
  
              &lt;td&gt;0&lt;/td&gt;
  
              &lt;td&gt;2015-05-12 11:25:16&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is there is no padding on the table and it goes to the very edges of the web browser like this:</p>
  
  <p><img src="https://i.stack.imgur.com/2y5HI.png" alt="Table"></p>
  
  <p>How do I add padding to this bootstrap table? I tried <code>&lt;div id="todays-table" style="padding: 20px;"&gt;</code> and <code>table { padding: 20px; }</code>, neither of which worked. Can someone point in the right direction on how to do this please?</p>