表溢出到Div之外

通过执行以下操作来扭转局面:

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

此外,我建议您:

• 不使用 center
• 不要使用 width bgcolor 宽度 和 background-color )

您可以使用 table-layout:fixed .

下面的CSS将使您的表扩展到周围div的宽度。

table 
{
    table-layout:fixed;
    width:100%;
}

here .

一个粗糙的工作环境是设置 display: table 在包含的div上。

我尝试了上面提到的所有解决方案,但没有成功。我有三张桌子,一张在另一张下面。最后一个溢出了。我用以下方法修复了它:

/* Grid Definition */
table {
    word-break: break-word;
}

对于处于边缘模式的IE11,需要将其设置为 word-break:break-all

起初我使用詹姆斯·劳鲁克的方法。然而,这改变了所有的宽度 td

我的解决办法是使用 white-space: normal white-space: nowrap ). 这样,文本将始终中断。使用 word-wrap: break-word 将确保在需要时一切都会中断,即使是一句话讲到一半。

CSS将如下所示:

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    word-wrap: break-word;
}

换行:打断单词 可能会让你桌上的字难以辨认。不过,它会使您的桌子保持正确的宽度。

我几乎尝试了以上所有方法,但都不适用于我。。。下面的例子说明了这一点

word-break: break-all;

这将添加到父div(表的容器)上

overflow-x: auto;
overflow-y : hidden;

如果表脱离了块级元素,请将容器转换为“内联块”。。。

div {
    display:inline-block;
}

这会把你的容器包在桌子上 ,不管它长得多大(您还可以将父容器设置为“display:table”,这将把您的表“嵌套”到另一个表中并包含它。记住,嵌套表在HTML中是允许的。)包装好后,您可以添加更多样式来控制容器的宽度并包含表的视图。限制扩展表并让用户仍能看到其所有内容的唯一方法是使用overflow:visible。下面,我还添加了要将其约束到的宽度。。。

 div {
    display:inline-block;
    overflow:scroll;
    width: 300px
}

请记住,所有表的单元格中最终都会有意外的内容,这些内容可能会脱离容器,或将表或页面宽度扩展到超出预期的程度。您不能阻止像这样意外增长的表,也不能计划该事件,除非您能够完全控制填充它们的内容的任何可能方面(这是罕见的)。但是您可以控制环绕它的父对象。

有一个 width="400"