100 width table overflowing div container

Question

I am having issues with an html table that is overflowing it s parent container    x000D   x000D   page   x000D      width  280px  x000D      border solid 1px blue  x000D    x000D   x000D   my-table   x000D      word-wrap  break-word   x000D    x000D   x000D   my-table td   x000D      border solid 1px  333  x000D    x000D   lt div class  page  gt  x000D       lt table class  my-table  gt  x000D           lt tr gt  x000D               lt th gt Header Text lt  th gt  x000D               lt th gt Col 1 lt  th gt  x000D               lt th gt Col 2 lt  th gt  x000D               lt th gt Col 3 lt  th gt  x000D               lt th gt Col 4 lt  th gt  x000D               lt th gt Header Text lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt An archipelago is a chain or cluster of islands  The word archipelago is derived from the Greek     -     arkhi and p  a        p  lagosthrough the Italian arcipelago  In Italian  possibly following a tradition of antiquity  the Arcipelago  from medieval Greek      p  a     was the proper name for the Aegean Sea and  later  usage shifted to refer to the Aegean Islands  since the sea is remarkable for its large number of islands   It is now used to refer to any island group or  sometimes  to a sea containing a large number of scattered islands such as the Aegean Sea  1  lt  td gt  x000D               lt td gt some data lt  td gt  x000D               lt td gt some data lt  td gt  x000D               lt td gt some data lt  td gt  x000D               lt td gt some data lt  td gt  x000D               lt td gt An archipelago is a chain or cluster of islands  The word archipelago is derived from the Greek     -     arkhi and p  a        p  lagosthrough the Italian arcipelago  In Italian  possibly following a tradition of antiquity  the Arcipelago  from medieval Greek      p  a     was the proper name for the Aegean Sea and  later  usage shifted to refer to the Aegean Islands  since the sea is remarkable for its large number of islands   It is now used to refer to any island group or  sometimes  to a sea containing a large number of scattered islands such as the Aegean Sea  1  lt  td gt  x000D           lt  tr gt  x000D       lt  table gt      x000D   lt  div gt  x000D   x000D   x000D    How can I force both the header text and the table cell text to wrap in a way that it will fit in its container properly   I would prefer a CSS only method  but am also open to using Javascript  or jQuery  if absolutely necessary

User · Answer

Add display  block  and overflow  auto  to  my-table  This will simply cut off anything past the 280px limit you enforced  There s no way to make it  look pretty  with that requirement due to words like p  lagosthrough which are wider than 280px

User · Answer

From a purely  make it fit in the div  perspective  add the following to your table class  jsfiddle    table-layout  fixed  width  100     Set your column widths as desired  otherwise  the fixed layout algorithm will distribute the table width evenly across your columns   For quick reference  here are the table layout algorithms  emphasis mine    Fixed  source With this  fast  algorithm  the horizontal layout of the table does not depend on the contents of the cells  it only depends on the table s width  the width of the columns  and borders or cell spacing  Automatic  source In this algorithm  which generally requires no more than two passes   the table s width is given by the width of its columns    as determined by content   and intervening borders        This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass    Click through to the source documentation to see the specifics for each algorithm

User · Answer

Try adding   word-break  break-all    to the CSS on your table element     That will get the words in the table cells to break such that the table does not grow wider than its containing div  yet the table columns are still sized dynamically   jsfiddle demo

User · Answer

update your CSS to the following  this should fix   page       width  280px      border solid 1px blue      overflow-x  auto

User · Answer

Try adding to td   display  -webkit-box     to make td as block word-break  break-word     to make content justify   overflowed tds will align with new row

User · Answer

Well  given your constraints  I think setting overflow  scroll  on the  page div is probably your only option   280 px is pretty narrow  and given your font size  word wrapping alone isn t going to do it   Some words are just long and can t be wrapped   You can either reduce your font size drastically or go with overflow  scroll

[html] 100% width table overflowing div container

Examples related to html

Examples related to css

Examples related to html-table