首页 文章

为什么表会在左右两侧增加额外的空间?

提问于
浏览
0

我在 <div> 里面有一个表,我想设置表 width 100%的父div . 这是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或表格上的边距 . 没有填充或边距 . 任何的想法?

1 回答

  • 1

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

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

相关问题