为什么桌子在左右两侧都增加了额外的空间？

Question

我在<div>内有一个表，我想将表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;
}