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

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

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

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

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

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

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

Ответы

Ответ 1

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

Также укажите .action a 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>

Ответ 2

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

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

Ответ 3

установите colum width: 1px и white-space: nowrap.

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