Add margin to Bootstrap 3 table?

Question

I have a Bootstrap 3 table inside a div. It is defined like this:

<div id="todays-table">
<table class="table">
    <thead>
        <tr>
            <th>Train Number</th>

            <th>Status</th>

            <th>Last Attempt</th>
        </tr>
    </thead>

    <tbody>
        <tr class="danger">
            <td>2001</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2005</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="success-row">
            <td>2006</td>

            <td>1</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2007</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2008</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2009</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2010</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2011</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2012</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2013</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>
    </tbody>
</table>
</div>

The problem is there is no padding on the table and it goes to the very edges of the web browser like this:

How do I add padding to this bootstrap table? I tried <div id="todays-table" style="padding: 20px;"> and table { padding: 20px; }, neither of which worked. Can someone point in the right direction on how to do this please?

Answer 1

You want margin, not padding:

#todays-table {
    margin: 20px;
}

Demo

Better, set styles on a reusable class:

.padded {
    margin: 20px;
}

<div id="todays-table" class="padded">

That said, Bootstrap's grid system does a nice job of that type of thing without additional CSS:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" id="todays-table">

Demo 2

http://getbootstrap.com/css/#grid