Table column narrower than whole table

Question

My table is 500px wide. Is it possible for that table to have only one column 100px wide?

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 600px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
}

<table>
   <tr>
      <th>header 1</th>
   </tr>
   <tr>
      <td>row 1</td>
   </tr>
</table>

In example above this single column has full with of the table.

Answer 1

One solution would be adding a filler column with visibility: hidden to take the rest of the space. Then adjust the width as needed using :last-child to apply the width to the last element only. You can check how it looks in the snippet below.

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 600px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
}

th:last-child, td:last-child {
   width: 400px; /* Filler column takes up the rest */
   visibility: hidden; /* Hides the extra column */
}

<table>
   <tr>
      <th>header 1</th>
      <th></th>
   </tr>
   <tr>
      <td>row 1</td>
      <td></td>
   </tr>
</table>