Таблица флажков - одинаковая ширина столбца

Question

Я борюсь с созданием таблицы с одинаковой шириной столбца, кроме первой (только для флажков), которая должна быть как можно меньше. Однако флажок переполняется. Есть идеи, как это исправить? Я делаю это:

table {
  table-layout: fixed;
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  width: auto;
}

td:first-of-type {
  width: 1%;
  white-space: nowrap;
}

<table>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Long non-important text</td>
    <td>Mid length</td>
    <td>Short</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Long non-important text</td>
    <td>Mid length</td>
    <td>Short</td>
  </tr>
</table>

jsfiddle пример

Answer 1

Для первого столбца укажите ширину в пикселях

td:first-of-type {
  width: 20px;
}

Если вы создаете компонент и хотите, чтобы этот компонент использовал разное время с различным размером флажка, тогда выберите ширину первого столбца. откуда это называется. Например, если я использую Angular, тогда код будет

<app-table [checkboxwidth]="20"></app-table>

, а затем установите ширину первого столбца на checkboxwidth.