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-width  but I can t seem to get this working  The following code  with a very small window  will cause this   lt style type  quot text css quot  gt     middlecol       width  45       border-right 2px solid red         middlecol table       max-width 100   important       lt  style gt    lt div id  quot middlecol quot  gt     lt center gt       lt table width  quot 400 quot  cellpadding  quot 3 quot  cellspacing  quot 0 quot  border  quot 0 quot  align  quot center quot  gt         lt tr gt           lt td bgcolor  quot  DDFFFF quot  align  quot center quot  colspan  quot 2 quot  gt             lt strong gt Notification  lt  strong gt           lt  td gt         lt tr gt           lt td width  quot 50 quot  gt             lt img src  quot http   www example com img png quot  width  quot 50 quot  height  quot 50 quot  alt  quot  quot  border  quot 0 quot  gt           lt  td gt           lt td gt            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           lt  td gt         lt  tr gt       lt  table gt     lt  center gt    lt  div gt   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

User · Answer

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

User · Answer

You may try this CSS  I have experienced it working always   x000D   x000D  div     border-style  solid    padding  5px     table     width  100     word-break  break-all    border-style  solid    x000D   lt div style  width 200px   gt     lt table gt       lt tr gt         lt th gt Col 1 lt  th gt         lt th gt Col 2 lt  th gt         lt th gt Col 3 lt  th gt         lt th gt Col 4 lt  th gt         lt th gt Col 5 lt  th gt       lt  tr gt       lt tr gt         lt td gt data 1 lt  td gt         lt td gt data 2 lt  td gt         lt td gt data 3 lt  td gt         lt td gt data 4 lt  td gt         lt td gt data 5 lt  td gt       lt  tr gt       lt table gt   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

overflow-x  auto  overflow-y   hidden    Apply the styling above to the parent div

User · Answer

Turn it around by doing    lt style type  text css  gt     middlecol       border-right  2px solid red      width  45           middlecol table       max-width  400px      width  100   important       lt  style gt    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

User · Answer

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

User · Answer

There s a width  400  on the table  remove it and it will work

User · Answer

A crude work around is to set display  table on the containing div

[html] Table overflowing outside of div

Examples related to html

Examples related to css

Examples related to html-table