A table crowded outside the sofas

Question

I am trying to stop a table with a width explicitly declared not overflowing beyond its parent div . I suppose I can do this with max-width , but I can't get this to work.

The following code (with a very small window) will call the following:

 <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 the browser window small, you will see that the table does not fit into it.

Answer 1

Rotate it by doing:

 <style type="text/css"> #middlecol { border-right: 2px solid red; width: 45%; } #middlecol table { max-width: 400px; width: 100% !important; } </style> 

I would also advise you:

• Do not use the center tag (it is deprecated)
• Do not use width , bgcolor attributes, set them using CSS ( width and background-color )

(assuming you can control the displayed table)

Answer 2

You can prevent tables from being expanded outside their parent div using table-layout:fixed .

In the CSS below, your tables will expand to the width of the surrounding div.

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

I found this trick here .

Answer 3

The tough job is to set display: table to the containing div.

Answer 4

I tried all the solutions mentioned above, then did not work. I have 3 tables one below the other. The latter flowed over. 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

Answer 5

At first I used the James Lavrack method. However, this changed all td widths.

The solution for me was to use white-space: normal in the columns (which was set to white-space: nowrap ). Thus, the text will always be interrupted. Using word-wrap: break-word ensures that everything word-wrap: break-word when needed, even halfway through the word.

CSS will look like this:

 td, th { white-space: normal; /* Only needed when it set differntly somewhere else */ word-wrap: break-word; } 

This may not always be a desirable solution, as word-wrap: break-word can make your words in the table illegible. However, it will keep the table in the correct width.

Answer 6

There a width="400" on the table, delete it and it will work ...