Table overflowing outside of div
回答1
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;
100%;
}
I found this trick here.
评论：
回答2
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
回答3
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.
回答4
overflow-x: auto;
overflow-y : hidden;
Apply the styling above to the parent div.
回答5
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;
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.
How to prevent HTML tables from becoming too wide
The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing—and it often is—but it makes it possible for oversized content to make text unreadable or completely break a site’s layout, especially in Internet Explorer.
This happened to me recently when a client’s legacy content, which contains some layout tables, was injected into the CSS-based layout I had built. It worked well in most cases, but some of the old documents have very long URLs that the browser can’t break. I needed to find a solution to that problem.
View Example 1 to see what I mean. Not very pretty.
Your first instinct is probably to do what I did: start hacking away at the CSS. How about giving overflow:hidden a try? Nope, nothing happens. What if I give the table a different width? No, it doesn’t budge. But there is a solution.
The trick is to use the CSS property table-layout. It can take three values: auto, fixed, and inherit. The normal (initial) value is auto, which means that the table width is given by its columns and any borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as wide as you have specified in the CSS. No more, no less. And to my great surprise this seems to be widely supported by browsers. The only browser of any significance that does not support it is IE/Mac, and the significance of that browser is rapidly approaching zero. Check it out for yourself in Example 2.
Next is deciding what to do with the content that doesn’t fit in the table anymore. If the table only contains text, word-wrap:break-word (word-wrap is specified in the CSS3 Text Effects Module) will force the browser to break words as necessary to prevent overflow. The result can be seen in Example 3.
Unfortunately that currently only works in IE/Win, Safari, and Shiira (imagine that… IE/Win, even version 6, is ahead of Firefox in supporting a CSS property).
A compromise is needed for the browsers that don’t support word-wrap. The choices are to either let the content overflow and collide with the other stuff on the page, or to use overflow:hidden to hide it. Which solution is more appropriate will vary from case to case. I went with overflow:hidden, the effect of which you can see in Example 4.
Sorry if this is old news to some of you, but since I only recently discovered this very useful property I thought it would be worthy of a quick write-up.
Update (2007-04-26): Ok, I’ve done some quick testing with overflow:auto. The only browser that handles it properly is Safari (and others based on WebKit). It acts exactly as you would expect it to when setting overflow:auto on table tells, only displaying a horizontal scrollbar when it is needed. In the others either nothing at all happened or things went completely mad.
In other words browser support doesn’t seem to be there for overflow:auto to be a real option.
I also tested overflow:hidden on table cells with over-wide content in other columns than the last one, and noticed no problems anywhere, so that option seems pretty safe.
Update (2009-08-25): Firefox 3.5 now supports word-wrap:break-word and displays Example 3 the same as Safari and IE.