表溢出Div

Question

我试图阻止一个表格,其宽度明确地声明不会溢出它的父级div.我认为我可以用某种方式做到这一点max-width,但我似乎无法让这个工作.

以下代码(窗口非常小)将导致:

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

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

红线是右边框div,如果你使浏览器窗口变小,你会看到桌子不适合它.

Answer 1

您可以通过使用阻止表扩展到其父div之外table-layout:fixed.

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

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

我在这里找到了这个技巧.

Answer 2

一个原始的工作是设置display: table包含div.

Answer 3

我尝试了上面提到的所有解决方案,然后没有工作.我有一张在另一张下面的3张桌子.流过的最后一个.我用它修复了它:

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

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

Answer 4

通过这样做来扭转它:

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

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

我还建议你:

• 不使用center标签(不推荐使用)
• 不要使用width,bgcolor属性,通过CSS(width和background-color)设置它们

(假设您可以控制已呈现的表)

Answer 5

起初我使用了James Lawruk的方法.然而,这改变了所有宽度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-wrap: break-word可能会使表中的单词难以辨认.然而,它会使您的桌子保持正确的宽度.

Answer 6

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

将上面的样式应用到父 div。

Answer 7

我几乎尝试了以上所有方法，但对我不起作用......以下是

word-break: break-all;

这要添加到父 div（表的容器）上。

Answer 8

如果您的表超出了块级元素，请将您的容器变成“内联块”，如下所示：

    div {
        display:inline-block;
    }

或者干脆把它变成表格显示类型...

    div {
        display:table;
    }

无论容器有多大，这都会将容器包裹在桌子周围。display:inline-block使用or的优点display:table是它们可以在超过 20 年的浏览器中工作，而人们发布的其他解决方案只能在一小部分最新的浏览器中工作，因此对于许多用户来说会失败。您还可以将父容器设置为display:table，这会将您的表“嵌套”到另一个表中并包含它。请记住，HTML 中也允许嵌套表，并且几乎可以在所有发明的浏览器中使用！

一旦将其包裹起来，您就可以添加更多样式来控制容器的宽度，直到它展开并包含表格的视图，直到它确实需要拉伸为止。此外，限制扩展表并让用户仍然在其父容器中看到其所有内容的唯一方法是添加overflow:visibleor overflow:scroll。下面，作为一个例子，我添加了我最初想要约束的宽度和额外的溢出......

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

请记住，所有表格最终都会在其单元格中包含意外内容，这些内容可能会超出容器范围或将表格或页面宽度延伸到超出您的预期，因此将宽度设置为“自动”通常最适合包含内容大小未知的表格的容器，例如图片。您无法阻止像这样意外增长的表，也无法为该事件做好计划，除非您可以完全控制填充它们的内容的所有可能方面（这种情况很少见）。但您可以控制包围它的父级。

而且......永远不要下载并安装这些新的 JavaScript黑客或当今孩子们编写的巨大脚本库来解决开发人员 20 年前解决的简单 HTML 或 CSS 问题。:)