Question

我正在尝试给表左边距，并将表的宽度加上其边距设置为包含div的100％。

通常我会使用width: 100%和box-style: border-box来执行此操作，但这似乎不适用于表格。

这是我的CSS：

table {
    width: 100%;
    margin-left: 2em;
    border: 1px solid black;
    box-sizing: border-box;
    display: table; /* tried adding this but doesn't seem to help */
}

您可以在JSFiddle中看到问题：http://jsfiddle.net/7C66d/

我可以在Chrome，Firefox和Safari中看到它。

Answer 1

我觉得你很困惑，你使用带边框的填充，而不是边距。

http://jsfiddle.net/7C66d/4/

HTML

<div id="wrapper">
    <table>
        <tbody>
            <tr><td>why is this table</td><td>not border-box</td></tr>
        </tbody>
    </table>
</div>

CSS

#wrapper {
    width: 100%;
    padding-left: 2em;
    box-sizing: border-box;
}

table {
    width: 100%;
    border: 1px solid black;
    display: table;
}

Answer 2

如果您不想要包装器，可以使用display:block，因为默认情况下它会将宽度设置为100％。

代码：

table {
    margin-left: 2em;
    border: 1px solid black;
    display: block;
}

CSS：border-box在桌面上没有按预期工作？

2 个答案: