title: CSS: In HTML table, word-wrap doesn't work with float: left
body: <p>I have a three column table and I want to set a text background in the cell basing on the length of the content. But when I set float: left, word-wrap doesn't work well.</p>
  
  <pre><code>table {
  table-layout: fixed;
  width: 100%;
  word-wrap: break-word;
  }
  </code></pre>
  
  <p>This is the content in each cell.</p>
  
  <pre><code>.read{
      min-height: 20px;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 10px;
      padding: 0px 10px 0px 10px;
      border-radius: 4px;
      background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(142, 175, 196, 1.0)), to(rgba(118, 146, 164, 1.0)));
      float:left;
  }
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td width="36px"&gt;..&lt;/td&gt;
          &lt;td&gt;
              &lt;div class="read"&gt;
              looooooooooooooooooooooooooooooooooooooooooooooooooooooooooog
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>If I remove float:left;, the background won't match the length of the content but word-wrap does work.
  How could I modify my CSS?</p>