HTML表全宽带边

发布时间：2020-12-14 21:37:24 所属栏目：资源来源：网络整理

导读：所以，我有一张桌子： table border=1 captionThis is a table./caption tr thOne/th thTwo/th thThree/th /tr tr tdFour/td tdFive/td tdSix/td /tr/table 我希望它尽可能的广泛，同时每边留下20px的余量。所以我做到了这一点： table{ border-collapse:col

所以，我有一张桌子：

<table border=1>
    <caption>This is a table.</caption>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

我希望它尽可能的广泛，同时每边留下20px的余量。所以我做到了这一点：

table{
    border-collapse:collapse;
    margin:20px;
    padding:0;
    width:100%;
}

但最终是父母的宽度加上左边额外的20px边距，导致出现垂直滚动条。有没有办法使它比父母的宽度少40px，而不添加其他元素来包围它？

jsfiddle：http://jsfiddle.net/pvHNM/

解决方法

使用calc()计算预期宽度：

table {
    margin: auto;
    width: calc(100% - 40px);
}

http://jsfiddle.net/EXS76/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!