Html – How can I style a table with a header to have all columns but one fit their content, with the final column taking up all remaining space?

I want all of the columns in my table to have a width that matches their content, no more, no less. I want that width the stay the same as the screen resizes. I want one column in my table to grow to fill the remaining space. Its width should change as the window re-sizes.

My problem is that with multiple rows and a table header, I don’t know how to achieve this. I can make it work by hard coding the column widths for the columns that I want to remain static, but I don’t want that — I want their widths to be determined by the content.

This is working (based on another stack overflow response), but does not adapt to the content in columns 1 and 2

table {
  display: table;
  width: 100%;
  table-layout: fixed;
  position: absolute;
  top: 0;
}

.small {
  background: green;
  width: 80px;
}

.extend {
  background: red;
}

<table>
  <thead>
    <th class="small">Column 1</th>
    <th class="extend">Column 2</th>
    <th class="small">Column 3</th>
  </thead>
  <tbody>
    <tr>
      <td class="small">First column</td>
      <td class="extend">This column should fill the remaining space </td>
      <td class="small">Small column 2</td>
    </tr>
  </tbody>
</table>

Here is my fiddle.