Collapse table columns as needed (up to min-width) to fit text in first column fully

Question

I'm struggling with following requirement:

A fixed-width HTML table should have several columns. The information in the first column is top priority and should always be visible. The remaining columns should always reduce their width so that text in first column's cells is always visible.

I managed to make a table that maintains fixed width and collapses columns in order to fit:

table {
  width: 200px;
  max-width: 200px;
  table-layout:fixed;
}
td:nth-child(even) {
  background-color: #EEE;
}
td {
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
<tr>
<td>Very important text, do not collapse!</td>
<!-- These columns should always collapse to fit the important text -->
<td>aaaa aaaa aaaa aaa aaa aaa</td>
<td>aaaa aaaa aaaa aaa aaa aaa</td></tr>

</table>

This table collapses all columns evenly, which is not what I want. I tried to disable overflow for the first column:

table {
  width: 200px;
  max-width: 200px;
  table-layout:fixed;
}
td:nth-child(even) {
  background-color: #EEE;
}
td {
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
td.no-overflow {
  overflow: initial;
}

<table>
<tr>
<td class="no-overflow">Very important text, do not collapse!</td>
<!-- These columns should always collapse to fit the important text -->
<td>aaaa aaaa aaaa aaa aaa aaa</td>
<td>aaaa aaaa aaaa aaa aaa aaa</td></tr>

</table>

Not sure if all browsers show the same, but in Firefox this shows the first column over the remaining ones and out of the table - the text freely flows outside of the element.

I also tried:

• width: auto;, width: fill; on the first column. That has no effect whatsoever, the columns remain evenly sized.

• width: -moz-max-content; works but all other colums dissappear completely. min-width is ignored

  table {
    width: 200px;
    max-width: 200px;
    table-layout:fixed;
  }
  td:nth-child(even) {
    background-color: #EEE;
  }
  td {
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-width:2em;
  }
  td.no-overflow {
    width: -moz-max-content;
    width: -webkit-max-content;
  }

  <table>
  <tr>
  <td class="no-overflow">Very important text, do not collapse!</td>
  <!-- These columns should always collapse to fit the important text -->
  <td>aaaa aaaa aaaa aaa aaa aaa</td>
  <td>aaaa aaaa aaaa aaa aaa aaa</td></tr>
  
  </table>

So to reiterate: Collapse all but the first column in order to fit the first column's text. Do not collapse completely, maintain a min-width: 2em for all columns. The table must have fixed width, it cannot expand to fit the columns.

I'm out of ideas. I don't want to use javascript for this.

Answer 1

table {
  width: auto;
  table-layout:fixed;
}
td:nth-child(even) {
  background-color: #EEE;
}
td {
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width:60px;
}
td:first-child {
  max-width:none;
}

<table>
<tr>
<td>Very important text, do not collapse!</td>
<!-- These columns should always collapse to fit the important text -->
<td>aaaa aaaa aaaa aaa aaa aaa</td>
<td>aaaa aaaa aaaa aaa aaa aaa</td></tr>

</table>

This work, set the max-width on td instead table then unset the max-width on the important td.