表格溢出到 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

您可以使用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

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

div {
    display:inline-block;
}

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

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

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

Answer 9

你可以试试这个 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 10

我使用了 Doomsbuster 先生的回答，即使用 word-break: break-word;，因为表中有长字符串导致它超出了包含的 div。

然后我发现break-word 是deprecated。

所以我改用了：

table {
    overflow-wrap: anywhere;
}

Answer 11

把它放在<TableContainer /> 就像一击一样

import { TableContainer, Table } from '@mui/material';


export default myTable = () => {

    return (
        <TableContainer>
            <Table>
                // ...
            </Table>
        </TableContainer>
    )
}

Answer 12

桌子上有一个width="400"，删除它就可以了...