Fixed-width columns in a dynamic table

Question

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

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

• Data shall never get cut off, even when the viewport is too small
• When the table does not fit the viewport, it shall be wider than the viewport

The fixed-width colums should work like this:

• Always have a fixed width
• Cut off any data that does not fit into it

I tried three approaches, none of them works:

• Defining the widths in the first table row
• Defining the widths in a colgroup/col section of the table
• Inserting a <div> into the fixed-width cells

Nothing works.

JS-Fiddle

table {
  border-collapse: collapse;
}
td {
  border: 3px solid red;
}
.fw {
  overflow: hidden;
  height: 20px;
}

<table width="100%">
  <colgroup>
    <col width="100%">
      <col width="50px">
        <col width="50px">
  </colgroup>
  <tr>
    <td>My dynamic cell shall be greedy and take up all available space</td>
    <td class=fw nowrap>
      <div class=fw>My first fixed-width cell shall be of fixed width</div>
    </td>
    <td class=fw>..</td>
  </tr>
  <tr>
    <td>dynamic</td>
    <td class=fw colspan=2>Fixed cells shall also support multiple colspans</td>
  </tr>
</table>

As I said, I cannot use table-layout: fixed because I also have dynamic columns.

Answer 1

You can use table-layout: fixed if you have a suitable min-width placed on the table to prevent overflow of the dynamically sized column:

table {
    table-layout: fixed;
    width: 100%;
    min-width: 400px;
}

Example

Note that the width attribute is deprecated and the CSS property should be used to size your columns and table.

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 400px;
}
td {
  border: 3px solid red;
  overflow: hidden;
}
.fluid {
  width: 100%;
}
.fixed {
  width: 100px;
}

<table>
  <colgroup>
    <col class="fluid">
    <col class="fixed">
    <col class="fixed">
  </colgroup>
  <tr>
    <td>My dynamic cell shall be greedy and take up all available space</td>
    <td>My first fixed-width cell shall be of fixed width</td>
    <td>....</td>
  </tr>
  <tr>
    <td>dynamic</td>
    <td colspan="2">Fixed cells shall also support multiple colspans</td>
  </tr>
</table>

Answer 2

You need to use:

min-width: 50px;
max-width: 50px;