为Bootstrap 3表添加保证金？

Question

我在div中有一个Bootstrap 3表。它的定义如下：

<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>

问题是桌面上没有填充，它会像这样进入网络浏览器的边缘：

如何在此引导程序表中添加填充？我尝试了<div id="todays-table" style="padding: 20px;">和table { padding: 20px; }，但都没有效果。有人可以指出如何做到这一点的正确方向吗？

Answer 1

你想要保证金，而不是填充：

#todays-table {
    margin: 20px;
}

<强> Demo

更好的是，在可重用的类上设置样式：

.padded {
    margin: 20px;
}

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

也就是说，Bootstrap的网格系统在没有额外CSS的情况下做了很好的工作：

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

<强> Demo 2

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

Answer 2

尝试向td自己添加一些样式

div#todays-table > table.table td {
    padding: 20px;
}

修改

重新阅读这个问题，这应该是你所追求的更多：

div#todays-table > table.table {
    margin: 20px;
}