Question

我有一个从屏幕边缘伸出的桌子，但是身体只有屏幕宽，导致桌子溢出。

<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：如何在表格与页面右边缘之间取得差距？

Answer 1

如果您将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 */}

http://jsfiddle.net/6REkj/1/

其他选择：

display:inline-block;min-width:100%;

body

http://jsfiddle.net/6REkj/3/

position:absolute;min-width:100%;

html

http://jsfiddle.net/6REkj/4/

Answer 2

CSS没有被破坏，the behaviour you are seeing is by design。

以上链接中的一些引用：

以下约束必须包含在其他属性的已使用值中：

'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 。

Answer 3

最奇怪的是没有提到最简单的解决方案：

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（Blink中的-webkit-，很奇怪）。

Answer 4

唯一的解决方案是使用垂直滚动条。它可以通过附加div来实现，包裹table。

这将是css：

body { border: 2px solid blue; }
table, p { background-color: cyan; width: 100%; word-wrap:break-word;}
div { width: 100%; overflow-x: auto;}

如果您只有p - 标记，则属性word-wrap:break-word;会有所帮助。您还可以将段落移到div之外，这样您就可以在不滚动的情况下查看整个内容。

看到工作中的小提琴：

http://jsfiddle.net/WrbpJ/

如果您希望滚动整个页面，而不仅仅是div，可以使用：

body { border: 2px solid blue; display: table;}

请参阅http://jsfiddle.net/sGH4t/

如果您根本不想要滚动条，则必须使用列表或div而不是表格。

Answer 5

使用tr和td标签的方式，表中的数据必然会溢出。

当你使用简单的html表时，你必须决定你的表应该有多少行和colmuns。只需相应地添加tr和td标签，然后就完成了。http://jsfiddle.net/6REkj/ Fiddle

为什么不扩展以适应其内容？

5 个答案: