Растягиваются колонки таблицы, при table { width: 100%} и col: { width: 200px }, как исправить это поведение?

Question

[AlexBoynic]

Имеется код, грубо говоря такой

<div class="table-container">
  <table>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </table>
</div>
<router-outlet></router-outlet>

table {
  table-layout: auto;
  border: 1px solid black;
  border-collapse: collapse;
  td {
    border: 1px solid black;
  }
}

col {
  width: 200px;
}
col:first-child {
  width: 72px !important;
  max-width: 72px !important;
}
.table-container {
  width: 100%;
}
table {
  width: 100%;
}

И менять реализацию сильно не могу, тк кода очень много переписывать нужно, если менять на флексы к примеру
Суть в том что, я выставляю фиксированную ширину для колонок, но если есть лишнее пространство, то они начинают растягиваться не смотря на фикс. ширину.
Мне нужно добавить что то в код, чтобы первая колонка(к примеру) железно оставалась такой ширины, какой я указал, остальные пусть растягиваются, если нужно, но выставлять им тоже надо фиксированную ширину

Comments

[Ankhena]

Мне нужно добавить что то в код, чтобы первая колонка(к примеру) железно оставалась такой ширины, какой я указал, остальные пусть растягиваются, если нужно, но выставлять им тоже надо фиксированную ширину

Задавайте минимальную и максимальную.
И important уберите.

[Андрей]

а таблице зачем задавать 100%?

Answer 1

[sergski]

col {
width: auto;
min-width: 200px;
}
col:first-child {
width: 72px;
min-width: 72px;
}

Answer 2

[Сергей delphinpro]

Чтобы таблица слушалась установки ширины для колонок, то ей нужно выставить фиксированный лэйаут

table {
  table-layout: fixed;
}

Но там кажется остальная доступная ширина будет поровну распределяться между всеми колонками, у которых ширина явно не задана.