为什么< body>扩展以适合其内容? [英] Why isn't <body> expanding to fit its contents?
问题描述
我有一个桌子延伸到屏幕的边缘，但是主体的宽度只有屏幕的宽度，导致桌子溢出.
I have a table that extends off the edge of the screen, but the body only gets as wide as the screen, causing the table to overflow it.
演示: http://jsfiddle.net/6REkj/
<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损坏的事情之一.我以为包含元素应该扩展以适合其内容.
This is one of those things that make me think CSS is broken. I thought containing elements were supposed to expand to fit their contents.
问题1:为什么这样做?
问题2:我应该怎么做才能在表格和页面右边缘之间留出边距?
Question 2: What should I do to get a margin between the table and the right edge of the page?
推荐答案
如果将 display:table; 设置为 body 或 html ，它将允许其宽度扩大到100％的视口.它会像 table 一样扩展:)
if you set display:table; to body or html, it will allow to grow its width over the 100% of viewport. it will just expand like a table does :)
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％;onbody: http://jsfiddle.net/6REkj/4/
display:inline-block;min-width:100%;onbody: http://jsfiddle.net/6REkj/3/position:absolute;min-width:100%;onhtml: http://jsfiddle.net/6REkj/4/
编辑如今，
min-width:max-content可以. http://jsfiddle.net/bj4wk6m2/
这篇关于为什么< body>扩展以适合其内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
