The table is in a div block which occupies 87% of the entire page in the table is width='100%' If you enter a lot of text without spaces in td the table will go out of the box. How to make the text be transferred and the table does not go beyond the div

  • how about sample code? - NeedHate 2:53 pm
  • @NeedHate I think I ropis everything in detail - BedOmar
  • @BedOmar css: word-break: break-all; - Alexey Shimansky
  • @ Alexey Shimansky And what is this for div or p, or for table or td? - BedOmar
  • @ Alexey Shimansky write this answer. I will choose it. He will help me! - BedOmar

1 answer 1

The table-layout and word-wrap properties will help you.

 .example-area { width: 87%; background: #efefef; } .example-tbl { width: 100%; table-layout: fixed; /* ! */ word-wrap: break-word; /* ! */ border-collapse: collapse; } .example-tbl td { padding: 10px; vertical-align: top; font-family: sans-serif; font-size: 0.9em; border: 1px solid #ccc; } 
 <div class="example-area"> <table class="example-tbl"> <colgroup> <col width="40%" /> <col width="25%" /> <col /> </colgroup> <tbody> <tr> <td>this is</td> <td>example</td> <td>table</td> </tr> <tr> <td>Pneumonoultramicroscopicsilicovolcanoconiosis</td> <td>Llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch</td> <td>ANTICONSTITUTIONNELLEMENT</td> </tr> </tbody> </table> </div>

  • Your code is working but the main page that word-wrap helped me: break-word; - BedOmar