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

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

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

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

我发现了这个技巧here。

Answer 2

粗略的解决方法是在包含div上设置display: table。

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

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

word-break: break-all;

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

Answer 7

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

将上述样式应用于父div。

Answer 8

您可以尝试使用此CSS。我一直都在经历它的工作。

div {
  border-style: solid;
  padding: 5px;
}

table {
  width: 100%;
  word-break: break-all;
  border-style: solid;
}

<div style="width:200px;">
  <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      <td>data 3</td>
      <td>data 4</td>
      <td>data 5</td>
    </tr>
    <table>
</div>

Answer 9

如果您的表格脱离了块级元素，请将容器变成“内联块”...

div {
    display:inline-block;
}

这会将您的容器包裹在您的桌子周围，无论它有多大。（您也可以将您的父容器设置为“display:table”，这会将您的表格“嵌套”到另一个表格中并包含它。请记住，HTML 中允许嵌套表格。）包装好后，您可以添加更多表格样式来控制容器的宽度并包含表格的视图。限制扩展表并让用户仍然看到其所有内容的唯一方法是使用溢出：可见。下面，我还添加了我想限制它的宽度...

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

请记住，所有表格最终都会在其单元格中包含意外内容，这些内容可能会超出容器或超出您的预期扩展表格或页面宽度。您无法停止像这样意外增长的表格，或计划该事件，除非您可以完全控制填充它们的内容的所有可能方面（这种情况很少见）。但是你可以控制环绕它的父级。

Answer 10

桌子上有一个width="400"，将其移除，它会起作用......

表溢出Div

10 个答案: