title: CSS Table Forced Wrapping
body: <p>I have a three column CSS based table layout. The table is designed to have the first two columns squeezed down to its minimum width relative to the content that fill them so that the third column can fill most of the view. Sounds pretty simple right? Well, the third column keeps giving me troubles. </p>
  
  <p>The table is part of a Webkit (Safari-based) application and its built to fill the full width of the window given no matter how much it is resized. Therefore, no default widths are defined. So when it comes to wrapping blocks of text such as a URL or just plain repeated character spam it just continues on without a wrap. </p>
  
  <p>I am aware of the "word-wrap: break-word;" option but that does not work because I cannot define the width unless I know the width of the children. I also have tried "word-break: break-all;" — That works but it is not eye appealing to see a wrap in the middle of a word which legitimately could be cut from a space.</p>
  
  <p>Is anyone aware of a pure HTML &amp; CSS 3 solution to have two child boxes and a third which can wrap long text without having to use JavaScript or other means?</p>
  
  <p>Examples of Layout and Code:</p>
  
  <pre><code>--------------------------------------------------------------------------------------------
  | Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
  --------------------------------------------------------------------------------------------
  | Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
  --------------------------------------------------------------------------------------------
  </code></pre>
  
  
  
  <pre><code>&lt;div class="table_class"&gt;
  &lt;div class="table_row"&gt;
  &lt;div class="cell1"&gt;data&lt;/div&gt;
  &lt;div class="cell2"&gt;data&lt;/div&gt;
  &lt;div class="cell3"&gt;datadatadatadata…&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>