当HTML表格的宽度设置为100％时，如何获取HTML表格的边距？

Willem 发表于 Dev

威廉

我正在努力获得一个HTML表格来填充容器的宽度，并在不溢出的情况下尊重边距。

此示例（请参阅https://jsfiddle.net/v6o12u9o/）将表格的宽度设置为100％，但是由于有边距，表格溢出了其父表格的边框。我该如何解决？

HTML：

<div style="border: 1px solid red; margin:10px;">
<table border=1>
    <tr>
        <td>
            First cell.
        </td>
        <td>
            Second cell.
        </td>
    </tr>
</table>
</div>

CSS：

table {
    margin: 20px;
    background-color: yellow;
    width:100%;
}

td {
    width: 50%;
}

我尝试过的其他一些事情：

将右边距设置为40px。保证金权利被忽略。
改为设置padding-right。这使单元格变小，但桌子保持100％的宽度。
将表格的显示设置为“阻止”。这样可以使表格的大小正确，但是单元格太小（我尝试在单元格上设置“阻止”，没有运气）

无神论者

如果希望表格为100％，则可以执行以下操作，并通过将其移至父项的填充来补偿左右边距：

CSS：

.tableElement {
    margin: 20px auto;
    background-color: yellow;
    width: 100%;
}

.tableCell {
    width: 50%;
}

.tableWrapper {
    border: 1px solid red;
    margin: 10px;
    padding: 0 20px;
}

HTML：

<div class="tableWrapper">
    <table class="tableElement" border="1">
        <tr>
            <td class="tableCell">First cell.</td>
            <td>Second cell.</td>
        </tr>
    </table>
</div>

小提琴：https : //jsfiddle.net/v6o12u9o/5/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。