How to achieve text-overflow: ellipsis in a HTML Table with flexible columns

Question

I've spent the last couple of days trying to solve what feels like should be an incredibly common problem with html tables. Here is a codepen which hopefully illustrates the last problem I am trying to solve (also contains solutions to many of the problems I have seen people asking on here for solutions to): codepen

<div>
 <table>
  <thead>
   <tr>
    <th class='collapsed'>0px0px</th>
    <th class='collapsed'>0px</th>
    <th>fill</th>
    <th class='collapsed'>0px</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td class='collapsed'>a</td>
    <td class='collapsed'>asdasdasdasd</td>
    <td>asdasdaasdasdasdsdasdasdasd</td>
    <td class='collapsed'>a</td>
   </tr>
  </tbody>
 </table>
</div>

Here are 3 images from the codepen

In essence, I have 2 types of column in my table - one which collapses to the headers content width, and one which expands to fill the tables remaining space. The first is denoted in the table with the header text '0px' and the second with the text 'fill'.

I spent quite a while trying to achieve the desired behaviour for the collapsed columns, which I am now happy with. And while the field value is not too long, I am also happy with the behaviour of other cells. But as you can see in the 2nd and 3rd example it goes wrong for longer strings.

The red div has a set width of 400px, and the table has width: 100%. But for long strings the the table overflows the div, with seemingly nothing to stop it doing so.

One solution that I found (illustrated by example 3) is to add word-break: break-all to cells which are not collapsed. This allows the string to wrap across multiple lines and hence the table does not overflow its parent div.

HOWEVER, my desired behaviour is that it clips the string with a text-ellipsis instead of wrapping to multiple lines or expanding outside its parent div.

Can anyone solve this final piece of the puzzle?