The following code creates a table with three columns. Columns “id” and “status” are fixed based on their content. The “summary” column takes up whatever space is remaining.

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
}

th {
  border: 1px solid black;
  padding: 5px;
  text-align: left;
}

td {
  border: 1px solid black;
  padding: 5px;
}

.amount {
  text-align: right;
}

.col1, .col3 {
  width: 0;
}

.col2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipses;
  max-width: 0;
}

<table>
  <tr>
    <th class="col1">Id</th>
    <th class="col2">Summary</th>
    <th class="col3">Status</th>
  </tr>
  <tr>
    <td class="col1">0A-0000-01</td>
    <td class="col2">Short text</td>
    <td class="col3">Complete</td>
  </tr>
  <tr>
    <td class="col1">0A-0000-02</td>
    <td class="col2">Shorter</td>
    <td class="col3">Pending</td>
  </tr>
  <tr>
    <td class="col1">0A-0000-03</td>
    <td class="col2">Very long text that goes on and on and on</td>
    <td class="col3">Pending</td>
  </tr>
</table>

When resizing the view, the overflowing text is correctly hidden; however, ellipses don’t appear. What’s the cause of this and how can it be resolved?