我有一个超出屏幕边缘的表格，但主体的宽度仅与屏幕一样宽，导致表格溢出。
<html>
<head>
<style>
table { background-color: lime; }
body { border: 2px solid blue; }
</style>
</head>
<body>
<table>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
</table>
</body>
</html>
这是让我觉得 CSS 已损坏的原因之一。我认为包含的元素应该扩展以适应它们的内容。
问题 1:为什么要这样做？
问题 2:如何使表格和页面右边缘之间留有边距？
最佳答案
如果您将 display:table; 设置为 body 或 html，它将允许在 100% 的视口(viewport)上增加其宽度。它会像 table 一样展开 :)
html {display:table;width:100%; /* need to set a width to 100%, wich means here a min-width since it is displayed with the same specifities thas has a table , it shrinks and expand according to its content */}
其他选项:
display:inline-block;min-width:100%;在body上:http://jsfiddle.net/6REkj/3/position:absolute;min-width:100%;在html上:http://jsfiddle.net/6REkj/4/
Edit nowdays,
min-width:max-contentwould do . http://jsfiddle.net/bj4wk6m2/
关于css - 为什么 <body> 不扩展以适应其内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21389073/