title: Using "word-wrap: break-word" within a table
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table">Word-wrap in a html table</a>  </p>
  </blockquote>
  
  
  
  <p>This text behaves exactly the way I want on Google Chrome (and other modern browsers):</p>
  
  <pre><code>&lt;div style="border: 1px solid black; width:100%; word-wrap: break-word;"&gt;
    &lt;p&gt;
      aaaaaaaaaaaaaaaa
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ol>
  <li><p>When the browser is wide enough, a+ and b+ are on the same line. </p>
  
  <pre><code>aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </code></pre></li>
  <li><p>As you narrow the browser, a+ and b+ are put on separate lines.</p>
  
  <pre><code>aaaaaaaaaaaaaaaa
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </code></pre></li>
  <li><p>When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).</p>
  
  <pre><code>aaaaaaaaaaaaaaaa
  bbbbbbbbbbbbbbbbbbbbbbbb
  bbbbbbbb
  </code></pre></li>
  </ol>
  
  <p>That's all great.</p>
  
  <p>In my situation, however, this is not a <code>div</code> but a <code>table</code>, like so:</p>
  
  <pre><code>&lt;table style="border:1px solid black; width:100%; word-wrap:break-word;"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;p&gt;
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        &lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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>
  
  <p>P.S. "Don't use tables" is not helpful.</p>