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

问题是表格没有填充，并且它延伸到Web浏览器的边缘，如下所示： 我该如何在这张Bootstrap表格上添加内边距？我尝试了

和table { padding: 20px; }，但都不起作用。请问有谁能指点一下如何做？

- heinst

Answer 1

您需要的是外边距，而不是内边距：

#todays-table {
    margin: 20px;
}

演示

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

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

演示2

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

- isherwood

Answer 2

尝试为元素本身添加一些样式。

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

编辑

刚刚重新阅读了问题，这应该更符合你的要求:

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

- martincarlin87