How do I make one table column fill all the spare horizontal space?

I have a HTML table consisting of 3 columns. It has a fixed width of 600px.

<table>
  <tr>
    <td>Name</td>
    <td>Qty</td>
    <td>Actions</td>
  </tr>
</table>

I want the Qty and Actions columns to be as small as possible (keeping the content to one line) and th开发者_运维知识库e Name column to take up the rest of the available space. The size of the Qty and Actions column change depending on content/font size so fixed widths will not work in this case.

Is there a way of doing this in HTML/CSS? Or is this something I need to break out the Javascript for?

You can apply width="99%" on that column. For example:

<table> 
  <tr> 
    <td width="99%">Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
  </tr> 
</table> 

you can use max-width:99%; on the first column and give fixed sizes on the other columns (I used pixels sized columns).

<table style="width: 100%;">
  <tr>
    <td style="max-width: 99%">
      Will max
    </td>
    <td style='width:110px;'> 
      fixed size here
    </td>
  </tr>
</table>

For every column you want to be the minimum width: (1) set the CSS width to zero and (2) use white-space: nowrap to prevent the text from wrapping onto multiple lines.

table {
  width: 100%;
}

:where(th, td):not(.max) {
  width: 0;
  white-space: nowrap;
}

/* For demo purposes */
table, th, td {
  border: 1px solid gray;
}

<table>
  <tr>
    <th class="max">Name</th>
    <th>Qty</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td class="max">Victoria Adelaide Mary Louisa</td>
    <td>233,546,443</td>
    <td>Abort Retry Fail</td>
  </tr>
</table>