Using "word-wrap: break-word" within a table [duplicate]

Question

Possible Duplicate:
Word-wrap in a html table

This text behaves exactly the way I want on Google Chrome (and other modern browsers):

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">   <p>     aaaaaaaaaaaaaaaa     bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb   </p> </div> 

1. When the browser is wide enough, a+ and b+ are on the same line.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

2. As you narrow the browser, a+ and b+ are put on separate lines.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

3. When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbb 

That's all great.

In my situation, however, this is not a div but a table, like so:

<table style="border:1px solid black; width:100%; word-wrap:break-word;">   <tr>     <td>       <p>         aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa         bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb       </p>     </td>   </tr> </table> 

In this case, #1 and #2 happen, but not #3. That is, the table stops narrowing after step 2 and step 3 doesn't ever happen. The break-word doesn't seem to be filtering down.

Does anyone know how make #3 happen? The solution only need work in Chrome, but it it also worked in other browsers that would be even better.

P.S. "Don't use tables" is not helpful.

Answer 1

table-layout: fixed will get force the cells to fit the table (and not the other way around), e.g.:

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;               table-layout: fixed;">   <tr>     <td>         aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa         bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb     </td>   </tr> </table>