title: table - td width in percentage with overflow not working
body: <p>I am trying to build a table that contains a <code>td</code> which has a <code>width</code> set in percentage and when overflown a horizontal scrollbar.</p>
  
  <p>Unfortunately I don't manage to make this happen.</p>
  
  <p><a href="http://jsfiddle.net/ne45s2wf/1/" rel="nofollow">http://jsfiddle.net/ne45s2wf/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;cell 1
                  &lt;/td&gt;
                  &lt;td&gt;cell 2
                  &lt;/td&gt;
                  &lt;td class="too-long"&gt;cell 3 loooooooooooooooooooooooooooooooooooooooooooong
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
      position: relative;
      max-width: 500px;
      background-color: red;
  }
  
  table {
      width: 100%;
  }
  
  td.too-long {
      background-color: darkgreen;
      display: inline-block;
      width: 20%;
      overflow-x: scroll;
  }
  </code></pre>
  
  <ol>
  <li><p>First thing I wonder is what is the <code>td</code>-width in percentage relative to? And is it possible to set it to be relative to the <code>table</code>?</p></li>
  <li><p>I would set a maximum width in percentage for the <code>td</code> with <code>overflow hidden</code>. While this works for the <code>td</code>, the parent containers do not align their width to the <code>td</code> child when its width is set with percentage. The parents width is as if the child did not have any width set. Furthermore the table now is not "responsive" any more.</p></li>
  </ol>