为何我的Table无法占据容器100%宽度？

核心问题点： #

• 错误的宽度单位：你给body设置的width: 100vh是视口高度单位，用来定义宽度完全错误。body作为块级元素默认会占满父容器宽度，无需额外设置；如果要强制绑定视口宽度，应使用100vw（视口宽度单位）。
• 浏览器默认边距未清除：html和body元素在多数浏览器中带有默认margin，这会导致body无法紧贴屏幕边缘，产生留白。
• 表格默认边框间距：table元素默认存在border-spacing属性，会让表格与容器、单元格之间产生空隙，导致无法完全撑满。

修正后的代码： #

/* 清除html和body的默认边距 */
html, body {
    margin: 0;
    padding: 0;
    background: green;
}

.mainHeader{
    height: 150px;
    background-color:white;
}

.table-fullWitdh {
    width: 100%;
    /* 合并边框以消除默认间距 */
    border-collapse: collapse;
}

<table class="table-fullWitdh">
    <tr>
        <td class="mainHeader">
            hi
        </td>
    </tr>
</table>

内容的提问来源于stack exchange，提问作者inno