title: Break long word in table cell with percentage widths
body: <p><a href="http://jsfiddle.net/L2yLe/" rel="noreferrer">http://jsfiddle.net/L2yLe/</a></p>
  
  <p>The fiddle says it all.  I want a css-only solution that limits the width of the table to the width of the div.  The long string should be broken (but as you can see it isn't), and that causes the table to overflow.</p>
  
  <p>I don't want to use any pixel widths.  This should be completely fluid.</p>
  
  <pre><code>&lt;div&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              short string
          &lt;/td&gt;
          &lt;td&gt;
  somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata
          &lt;/td&gt;
          &lt;td&gt;
              short string
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  div {
      width: 50%;
      background-color: darkgray;
      padding: 15px;
      margin: 10px auto;
  }
  table {
      border-collapse: collapse;
  }
  td {
      border: 1px solid black;
  }
  </code></pre>