html - 为什么表格会在左右两侧添加额外的空间？

Question

我在 <div> 中有一张 table 我想设置表格 width其父 div 的 100%。这是 HTML:

 <div class="container-fluid">
                <div class="row-fluid">
                    <div class="col-md-12">
                        <div class="row custom-row">
                            <div class="col-md-2 title">
                                <strong>Shift</strong>
                            </div>
                            <div class="col-md-10 custom-table">
                                <table>
                                    <thead>
                                        <th>heading1</th>
                                        <th>heading2</th>
                                    </thead>
                                    <tbody>
                                        <tr><td>cell11 </td> <td> cell12</td></tr>
                                        <tr><td>cell21 </td> <td> cell22</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

我的期望很简单。表格宽度应与 col-md-10 custom-table 完全相同.我正在尝试以下操作:

.custom-table table {
    width: 100%;
}

但是表格的左右两边有一些空格，如下图:

你可以看到带有红色标记框的div，我设置了1px solid表格上的边框以可视化表格宽度。为什么表格没有被划伤以适应其父 div 宽度。我检查了 div 或表格上的填充、边距。没有填充或边距。任何想法？

Answer 1

将此 CSS 添加到您现有的 CSS。仅在需要时添加 !important。

.custom-table {
     padding: 0 !important;
}