Table overflowing outside of div
HtmlCssHtml TableHtml Problem Overview
I'm trying to stop a table that has width explicitly declared from overflowing outside of its parent div
. I presume I can do this in some way using max-width
, but I can't seem to get this working.
The following code (with a very small window) will cause this:
<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>
The red line is the right border of the div
, and if you make your browser window small, you'll see that the table doesn't fit into it.
Html Solutions
Solution 1 - Html
You can prevent tables from expanding beyond their parent div by using table-layout:fixed
.
The CSS below will make your tables expand to the width of the div surrounding it.
table
{
table-layout:fixed;
width:100%;
}
I found this trick here.
Solution 2 - Html
A crude work around is to set display: table
on the containing div.
Solution 3 - Html
I tried all the solutions mentioned above, then did not work. I have 3 tables one below the other. The last one over flowed. I fixed it using:
/* Grid Definition */
table {
word-break: break-word;
}
For IE11 in edge mode, you need to set this to word-break:break-all
Solution 4 - Html
Turn it around by doing:
<style type="text/css">
#middlecol {
border-right: 2px solid red;
width: 45%;
}
#middlecol table {
max-width: 400px;
width: 100% !important;
}
</style>
Also I would advise you to:
- Not use the
center
tag (it's deprecated) - Don't use
width
,bgcolor
attributes, set them by CSS (width
andbackground-color
)
(assuming that you can control the table that was rendered)
Solution 5 - Html
At first I used James Lawruk's method. This however changed all the widths of the td
's.
The solution for me was to use white-space: normal
on the columns (which was set to white-space: nowrap
). This way the text will always break. Using word-wrap: break-word
will ensure that everything will break when needed, even halfway through a word.
The CSS will look like this then:
td, th {
white-space: normal; /* Only needed when it's set differntly somewhere else */
word-wrap: break-word;
}
This might not always be the desirable solution, as word-wrap: break-word
might make your words in the table illegible. It will however keep your table the right width.
Solution 6 - Html
I tried almost all of above but did not work for me ... The following did
word-break: break-all;
This to be added on the parent div (container of the table .)
Solution 7 - Html
overflow-x: auto;
overflow-y : hidden;
Apply the styling above to the parent div.
Solution 8 - Html
If your tables are breaking out of your block-level elements, turn your container into an "inline-block"...
div {
display:inline-block;
}
This will wrap your container around your table, no matter how big it grows. (You can also set your parent container to "display:table", which will "nest" your table into another table and contain it. Remember, nesting tables is allowed in HTML.) Once you have it wrapped, you can then add more styles to control the container's width and contain the view of your table. The only way to confine an expanded table and let users still see all of its content in its parent container is to also add overflow:visible
or overflow:scroll
. Below, I have also added the width I want to constrain it to...
div {
display:inline-block;
overflow:scroll;
width: 300px
}
Remember, all tables will eventually have unexpected content in their cells that could break out of containers or extend the table or page width way beyond what you expect, so setting width to "auto" is generally best for containers holding tables with unknown content sizes like images. You cannot stop tables that grow unexpectedly like this, or plan for that event, unless you have complete control over ever possible aspect of the content that fills them (which is rare). But you can control the parent that wraps around it.
Solution 9 - Html
You may try this CSS. I have experienced it working always.
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>
Solution 10 - Html
I used Mr. Doomsbuster's answer of using word-break: break-word;
because there were long strings in the table causing it to extend beyond the containing div.
I then found break-word
is deprecated.
So instead i used:
table {
overflow-wrap: anywhere;
}
Solution 11 - Html
Put it in <TableContainer />
like blow
import { TableContainer, Table } from '@mui/material';
export default myTable = () => {
return (
<TableContainer>
<Table>
// ...
</Table>
</TableContainer>
)
}
Solution 12 - Html
There's a width="400"
on the table, remove it and it will work...