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

Question

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

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

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

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

Answer 1

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

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

Answer 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>