我有一个延伸到屏幕边缘的桌子,但是机身只有屏幕宽,导致桌子溢出.
<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:如何在表格和页面右边缘之间获得边距？
G-C*_*Cyr 14
如果设置display:table;为body或html,则允许在视口的100%上增加其宽度.它会像一个扩展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/CSS没有损坏，您看到的行为是设计使然。
上面链接的一些引号：
其他属性的使用值中必须包含以下约束：
'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'=包含块的宽度
..
如果将'width'设置为'auto'，则其他所有'auto'值将变为'0'，并且'width'从结果相等后开始。
由此可知，100%如果未设置所有其他属性，则块级元素的默认宽度为其包含的块。
<body> 默认情况下是块级元素。
您可以设置float: left;或display: inline-block启用body，它将随着内容的增长而增长。
这是一个jsFiddle。
要回答问题2（在不求助于display: table不是的元素的情况下获得接受的答案的结果table），您可以这样做：
CSS：
html {
padding: 10px;
}
html, body {
margin: 0px;
}
body {
border: 2px solid blue;
display: inline-block;
min-width: 100%;
box-sizing: border-box;
}
table, p {
background-color: cyan;
}
这是一个jsFiddle。
没有提到最简单的解决方案是很奇怪的：
body {
width: fit-content;
min-width: 100%; /* because the content might only be a few words */
box-sizing: border-box; /* because 100% + padding > 100% */
}
不幸的是，这并非在所有地方都有效，它仍然需要加前缀。在Chrome浏览器（有闪烁这些天），这将是：-webkit-fit-content（-webkit-在闪烁，怪异）。
| 归档时间： |
|
| 查看次数： |
4266 次 |
| 最近记录： |