表格溢出到 div 之外

Posted 2023-03-05

【中文标题】表格溢出到 div 之外

【英文标题】：Table overflowing outside of div

【发布时间】：2011-01-16 13:57:52

【问题描述】：

我正试图阻止一个明确声明宽度的表溢出其父级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  cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td >
          <img src="http://www.example.com/img.png"    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的右边框，如果你把浏览器窗口变小，你会发现表格不适合它。

【问题讨论】：

离题：不要使用<center>。它已被弃用多年。此外，您的桌子上已经有一个align="center"。

不幸的是，这是我无法控制的。 div 里面的内容实际上是从一个不是我生成的文件中包含的。我只能触摸 CSS，但如果可以，我会删除

【参考方案1】：

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

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

table 

    table-layout:fixed;
    width:100%;

我发现了这个技巧here。

【讨论】：

这会强制所有列的宽度相同......不是很有用

实际上您仍然可以使列的宽度不同，您只需在<col>s 或第一行的<td>s 中指定宽度（而不是让它根据文本大小流动）。来自 MDN：“固定：表格和列的宽度由表格和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。”

非常感谢。这是你为我做的很大的帮助......

【参考方案2】：

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

【讨论】：

这太棒了，正是我想要的。为了帮助其他人，这里有一些 googleable 字符串：我试图使用 CSS 来让父 div 溢出，或者让背景覆盖溢出的表格内容。效果很好，非常感谢！

只是一个附录，请注意应用它的上下文，它用于传递类似表格布局的行为，因此存在其他样式属性，如表格行、表格单元格。表格布局不浮动。有时仅 display:table 属性是不够的

经过数小时的挖掘寻找答案后也来到了这里。搜索引擎的字符串：div 内的表格不会滚动，firefox。带有表格的 Div 不会滚动，Firefox。 div 内没有出现滚动条。

我已经尝试了一些东西，但我只是将 display:table 添加到顶部父 div。问题已解决，谢谢。

长标题名称和长单元格内容的表格的最佳解决方案。谢谢！。

【参考方案3】：

我尝试了上面提到的所有解决方案，但都没有奏效。我有 3 张桌子，一张低于另一张。最后一个溢出了。我使用以下方法修复了它：

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

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

【讨论】：

在水平滚动的 div 中有一个表格破坏了我的布局，因为一个或多个列中的单词仅在手机上溢出列/表格/div。这有助于将单词分开，使其不再溢出。谢谢你，这是我在空闲时间搜索了大约两天后需要的修复！！！！

break-word 现已弃用

【参考方案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）

（假设你可以控制被渲染的表格）

【讨论】：

如果我设置宽度：100%，它会忽略我的边距：对。这会导致水平条滚动

【参考方案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 可能会使您在表格中的文字难以辨认。但是，它会让您的表格保持正确的宽度。

【参考方案6】：

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

word-break: break-all;

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

【参考方案7】：

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

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

【参考方案8】：

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

div 
    display:inline-block;

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

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

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

【参考方案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>

【讨论】：

请不要对多个问题发布相同的答案。相反，只需回答一个，并评论（或标记/关闭投票，一旦你有声誉）其他人是重复的。作为参考，我指的是***.com/a/63741405/2756409、***.com/a/63741355/2756409和***.com/a/63741938/2756409

此外，请仅提供提供新内容的答案。这个解决方案，word-break: break-word，已经有很多很多的答案在这里提供了。

【参考方案10】：

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

然后我发现break-word 是deprecated。

所以我改用了：

table 
    overflow-wrap: anywhere;

【参考方案11】：

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

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


export default myTable = () => 

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

【参考方案12】：

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