防止表扩展到父级之外

【问题标题】：Prevent table from expanding beyond parent防止表扩展到父级之外
【发布时间】：2014-08-11 14:17:15
【问题描述】：

我有一个包含在父 div 中的表。我看到的问题是，当表包含大于父级的数据时，它将扩展到父级之外。

这是一个小提琴，基本上所有东西都需要包含在蓝色盒子中。 （下面有更多信息） http://jsfiddle.net/CjX2v/7/

table {
    background-color: red;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height:100%;
}
table > tbody > tr:first-child {
    background-color: green;
    height: 20px;
}
div {
    background-color: blue;
    width:500px;  /* This value is not known, supplied by user */
    height: 500px;  /* This value is not known, supplied by user */
    display: inline-block;
}

overflow:hidden 将不起作用，因为表格中包含需要可见的文本。

我认为这是一个非常简单的问题，但如果您需要更多信息，请告诉我。

【问题讨论】：

• 如果没有特别的原因，请避免使用内联样式。特别是混合样式规则和内联样式。它使您的代码难以阅读且难以使用 - Why use CSS。顺便说一句，你能解释一下为什么容器 div 是固定位置的吗？
• 不要在 DIV 上设置高度。如果表比父表大，则需要一些空间来扩展。
• 另外，您是否知道选择器 div 将 css 规则应用于您页面中的所有 `

  ..？看起来你不知道自己在做什么。如果不是，请解释您为什么要使用此类属性和规则...
• @TilwinJoy 对丑陋的 CSS 感到抱歉。与看起来相反，我确实知道我在做什么：D。我已经用更“合适”的版本更新了链接，应该更具可读性。
• @TilwinJoy 另外，固定位置就是我们实现 div 的方式，因此我们可以将内容定位在我们想要的位置。您可以删除它，我认为它与我的问题无关。