Таблица с двумя столбцами: один как можно меньше, другой занимает все остальное

У меня есть таблица to-columns в div :

<div>
<table>
  <tbody>
    <tr>
      <td class="action" >
        <a> ✔ </a>
      </td>
      <td class="content">
       <p>Bigger text...(variable size).......</p>
      </td>
    </tr>
    <tr>
      <td class="action" >
        <a> ✔ </a><a> ✘ </a>
      </td>
      <td class="content">
       <p>Bigger text...(variable size).......</p>
      </td>
    </tr>
      ... same structure in all the table
  </tbody>
</table>
</div>

И я бы хотел, чтобы столбец «действие» соответствовал содержимому, а столбец «содержимое» занимал остальное доступное пространство. Столбец «действие» выглядел бы лучше с выравниванием по правому краю. Таблица также должна умещаться на 100% ширины контейнера.

Есть ли способ сделать это, не фиксируя ширину столбцов?

Я пробовал вот так:

table .action
{
    width:auto;
    text-align:right;
}
table 
{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
}

Но левый столбец занимает половину таблицы .. .

43
задан Brian Tompsett - 汤莱恩 16 June 2017 в 18:28
поделиться