Question

我的情况类似于this fiddle中表示的情况，哪里有一张表

table {
    width: 100%;
    margin-right: 30px;
}.

在div内。

问题在于，当我将保证金应用于表格时，它会超出其父div。我怎么能避免这种情况？

Answer 1

在div上添加padding-right代替：

div {
    padding-right: 30px;
}
table {
    width: 100%;
}

demo

Answer 2

宽度适用于元素的实际内容，因此您有一个内容为100％宽的表格，在左侧添加一些边距，将宽度超过100％，因此表格的右侧超出了父母的右边缘。可能你应该在父级上使用填充而不是表上的边距，或者只使用边距的附加包装。

table {
    width: 100%;
    border:1px solid green;
    border-collapse: collapse;
}
.inner{
    margin-left:100px;
}

<div>
    <div class="inner">
    <table border="1">
        <thead>
            <tr>
                <th>HEADER 1</th>
                <th>HEADER 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
        </div>
</div>

Css将余量应用于div内的表

2 个答案: