title: Automatic column width with `overflow-wrap: break-word`
body: <p>I have an HTML table with 3 columns - ID, timestamp, and data. ID and timestamp are quite narrow, and data can be really big, sometimes it has no line breaks so to avoid horizontal scrollbars I set <code>overflow-wrap: break-word</code>. To make it work, I need to set my <code>table-layout</code> to <code>fixed</code>.</p>
  <p>While it works, I don't like that all columns have now equal width. I can set the first two column sizes to some fixed width, but I'd like them to fit content. How can I force the 2 first columns to adjust their width and the third one to take the remaining space?</p>
  <p>Here's my code sample:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="width: 100%; table-layout: fixed; overflow-wrap: break-word"&gt;
    &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Time&lt;/th&gt;
      &lt;th&gt;Data&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;0&lt;/td&gt;
      &lt;td&gt;10:11&lt;/td&gt;
      &lt;td&gt;some_long_value_that_may_or_may_not_contain_a_space&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;10:12&lt;/td&gt;
      &lt;td&gt;some_long_value_that_may_or_may_not_contain_a_space&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;10:13&lt;/td&gt;
      &lt;td&gt;some_long_value_that_may_or_may_not_contain_a_space_and_it_may_be_so_long_that_it_wont_fit_into_the_column_and_needs_to_be_wrapped&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Basically what I need is to somehow force the 2 first columns to ignore the <code>table-layout: fixed</code> or to force <code>overflow-wrap: break-word</code> work without it.</p>