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

Issue

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 the 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?

Solution

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> 

Answered By - Ranta

Answer Checked By - Willingham (PHPFixing Volunteer)