表在 div 之外溢出

我尝试停止一个表，该表的宽度显式声明不会在其父 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的右边框，如果你把浏览器窗口设置得很小，你会发现表格不适合它。

264232 次浏览
小开
最佳答案

做以下事情来扭转局面:

<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)设置它们

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

小开

桌子上有一个 width="400"移开它，它就能工作了。

小开

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

小开

可以使用 table-layout:fixed防止表扩展到超出其父 div 的范围。

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

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

我发现了这个技巧 给你。

小开

起初我使用詹姆斯劳鲁克的方法。然而，这改变了所有的宽度的 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可能会使表中的单词难以辨认。然而，它将使您的表保持适当的宽度。

小开

我尝试了上面提到的所有解决方案，然后没有工作。我有三张桌子，一张在另一张下面。最后一个溢出来了。我用以下方法修好了它:

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

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

小开

我几乎尝试了以上所有的方法，但都不管用... ... 下面的方法管用

word-break: break-all;

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

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

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

小开

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

小开

如果您的表脱离了块级元素，将容器转换为“ inline-block”如下所示:

div {
display:inline-block;
}

这将包装您的容器周围的表，无论它增长多大。使用 display:inline-block的优点是 它可以在20多年的浏览器中工作，而其他的解决方案人们只在 只有最新浏览器的狭窄范围中发布工作，所以对于你的许多用户来说将会失败。您还可以将父容器设置为 display:table，它将把表“嵌套”到另一个表中并包含它。请记住，嵌套表也允许在 HTML 和工程几乎每一个浏览器曾经发明！

包装好之后，您可以添加更多样式来控制容器的宽度，直到它展开并包含表的视图，直到它确实需要展开为止。另外，限制扩展表并让用户仍然可以看到其父容器中的所有内容的唯一方法是添加 overflow:visible或 overflow:scroll。下面，作为一个例子，我已经添加了宽度，我想约束最初和溢出额外..。

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

记住，所有的表格最终都会在单元格中有意想不到的内容，这些内容可能会突破容器，或者将表格或页面的宽度扩展到超出你预期的程度，所以将宽度设置为“ auto”通常对于容纳内容大小未知的表格(如图片)的容器来说是最好的。除非您能够完全控制填充这些表的内容的任何可能方面(这种情况很少见) ，否则您无法停止这种意外增长的表，也无法为此事件进行计划。但是你可以控制包围它的父代。

还有... 永远不要下载和安装这些新的 JavaScript < em > hacks 或者现在孩子们编写的巨大的脚本库来修复20年前开发人员解决的简单 HTML 或 CSS 问题。 :)

小开

我使用了末日杀手先生关于使用 word-break: break-word;的回答，因为表中有很长的字符串，导致它超出了包含 div 的范围。

然后我发现 break-word是 不赞成。

所以我用了:

table {
overflow-wrap: anywhere;
}
小开

像吹气一样把它放进 <TableContainer />

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




export default myTable = () => {


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

提交答案