Как сделать один столбец таблицы заполнить все свободное пространство?

У меня есть таблица HTML, состоящая из 3 столбцов. Он имеет фиксированную ширину 600 пикселей.

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

Я хочу, чтобы столбцы Qty и Actions были как можно меньше (сохраняя содержимое в одной строке) и столбец Name, чтобы заняться остальной частью доступного пространства. Размер столбца Qty и Actions изменяется в зависимости от размера содержимого/шрифта, поэтому фиксированная ширина не будет работать в этом случае.

Есть ли способ сделать это в HTML/CSS? Или это то, что мне нужно, чтобы вырвать Javascript?

Ответ 1

Вы можете применить width = "99%" в этом столбце. Например:

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

Ответ 2

вы можете использовать max-width: 99%; в первом столбце и указать фиксированные размеры на других столбцах (я использовал столбцы с размерами пикселей).

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