How to wrap a table in a div

Question

I have a div containing a table with two rows. Everything is fine if there is a space between the words. But if I put a long word (e.g. 400 characters) in <td> , the table will exit the div . How can I break a word and limit it to a <div> ?

Here is my demonstration.

HTML:

 <div id="container"> <table> <td> <tr> title <tr> <tr> contenttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt </tr> </td> </table> </div> 

CSS

 #container{ border: 2px solid; width: 50%; margin: 0 auto; } table{ table-layout: fixed; } td{ word-wrap:break-word; } 

It should be noted that I cannot define width for <td> because I do not want the same width for all <td>

Here is what I want. (Assume there is no place) How can I do this?

Answer 1

You are probably looking for a CSS word-breaking property that is used to indicate whether to break lines within words:

 td { word-wrap: break-word; word-break: break-all; } 

Demo

word-break support is pretty good. See the MDN article for more information.

Answer 2

Using table-layout: fixed you also need to set the width of the table:

 #container { width: 70%; border: 1px solid; margin: 0 auto; } table { width: 100%; table-layout: fixed; } td { word-wrap: break-word } 

 <div id="container"> <table> <tr> <td>title</td> <td class="cc">contentttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</td> </tr> </table> </div>