CSS 为比屏幕宽的元素添加右边距

Question

我的网页上有一组表格，它们是动态生成的，宽度最终比屏幕宽（这不是问题，因为它旨在替换具有相同问题的 exel 电子表格） .

<body>
    <div class='indented-form'>
        <table>
          ... table elements here
        </table>
    </div>
</body>

css

body {
    margin-right: 0;
    padding: 0;
}

.indented-form {
    margin: 10px;
}

我在包含 table 的 div 上有 "margin:10px"。正如我所料，这会在页面左侧添加边距，但向右滚动时，table 到达边缘时没有任何边距。（div 似乎从正文中获取宽度，而正文又似乎基于浏览器宽度。）

即使 table 比浏览器宽，如何让它在右边包含边距？

Answer 1

如果您将 div 设为 inline-block 元素，它会拉伸以适应其中的 table：

.indented-form {
    display:inline-block;
    padding: 10px;
}

CSS add a right margin to element that is wider than screen