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

Question

У меня есть таблица столбцов в 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>

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

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

Я пытался с этим:

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

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

Answer 1

Предоставление контенту td ширины 100% заставит его занять столько места, сколько возможно, поэтому .content{ width: 100% } должно работать.

Также присвойте .action значение white-space: nowrap, чтобы убедиться, что x и галочка остаются рядом друг с другом. В противном случае контент сможет занимать еще больше места и заставлять иконки располагаться друг под другом.

table .action
{
    width:auto;
    text-align:right;
    white-space: nowrap
}
table .content { 
    width: 100% 
}
table 
{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    border: 1px solid
}

<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>
  </tbody>
</table>

Answer 2

Установить столбец width: 1px и white-space: nowrap.

Это попытается сделать его 1px, но nowrap не даст ему стать меньше, чем самый широкий элемент в этом столбце.

Answer 3

Я нашел этот ответ при попытке сделать один столбец из множества как можно меньшим .

Предоставление контента td в 1% width заставит его занимать как можно меньше места, поэтому .content{ width: 1% } работал для меня.