Table overflowing outside of div

Question

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-w

Answer 1

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 and background-color)

(assuming that you can control the table that was rendered)

Answer 2

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 .)

Answer 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.