Fixed-width columns in a dynamic table
<p>I have a table that shall be dynamic (which means I cannot use <code>table-layout: fixed</code>) but that shall have several fixed-width columns in it. The fixed-width columns shall also support colspans of larger than 1.</p>

<p>The dynamic columns (and the table itself) should work just like normal table cells in pure HTML:</p>

<ul>
<li>Data shall never get cut off, even when the viewport is too small</li>
<li>When the table does not fit the viewport, it shall be wider than the viewport</li>
</ul>

<p>The fixed-width colums should work like this:</p>

<ul>
<li>Always have a fixed width</li>
<li>Cut off any data that does not fit into it</li>
</ul>

<p>I tried three approaches, none of them works:</p>

<ul>
<li>Defining the widths in the first table row</li>
<li>Defining the widths in a colgroup/col section of the table</li>
<li>Inserting a <code>&lt;div&gt;</code> into the fixed-width cells</li>
</ul>

<p>Nothing works.</p>

<p><a href="https://jsfiddle.net/fcek6yLq/" rel="nofollow">JS-Fiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border-collapse: collapse;
}
td {
  border: 3px solid red;
}
.fw {
  overflow: hidden;
  height: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table width="100%"&gt;
  &lt;colgroup&gt;
    &lt;col width="100%"&gt;
      &lt;col width="50px"&gt;
        &lt;col width="50px"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;td&gt;My dynamic cell shall be greedy and take up all available space&lt;/td&gt;
    &lt;td class=fw nowrap&gt;
      &lt;div class=fw&gt;My first fixed-width cell shall be of fixed width&lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=fw&gt;..&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;dynamic&lt;/td&gt;
    &lt;td class=fw colspan=2&gt;Fixed cells shall also support multiple colspans&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>As I said, I cannot use <code>table-layout: fixed</code> because I also have dynamic columns.</p>