Делаем два из 4 столбцов равной ширины

Question

У меня есть таблица (ширина: 100%) с 4 столбцами.Столбцы 1 и 3 установлены на фиксированную ширину 190 пикселей.Я хочу, чтобы оставшиеся два столбца были одинаковой ширины независимо от ширины таблицы.Я пытался использовать <colgroup style='width: 50%'> для каждой группировки из двух столбцов.Я пытался использовать функцию calc calc(50% - 190px) для каждого из столбцов таблицы с помощью CSS.Я также использовал различные комбинации максимальной и минимальной ширины.Все попытки заканчиваются неудачей, когда один столбец увеличивается из-за содержимого.А содержимое - это текст, поэтому его следует переносить, а не переопределять ширину.Вот мой HTML и CSS.

CSS:

table, td {
  padding: 0px;
  margin: 0px;
  border: none;
  border-collapse: collapse;
}
table.main_table {
  width: 100%;
}
td.fixed_column {
  width: 190px;
  background-color: red;
}
td.non_fixed_column {
  max-width: calc(50% - 190px);
  background-color: yellow;
}

HTML:

<table class='main_table'>
  <tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
  <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>

    table, td {
      padding: 0px;
      margin: 0px;
      border: none;
      border-collapse: collapse;
    }
    table.main_table {
      width: 100%;
    }
    td.fixed_column {
      width: 190px;
      background-color: red;
    }
    td.non_fixed_column {
      max-width: calc(50% - 190px);
      background-color: yellow;
    }

<table class='main_table'>
      <tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
    </table>

Это дает мне идеальный результат ... пока в одной из ячеек не будет содержимого, из-за которого один столбец будет расти.Мне все равно, какой высоты клетка / ряд.

    table, td {
      padding: 0px;
      margin: 0px;
      border: none;
      border-collapse: collapse;
    }
    table.main_table {
      width: 100%;
    }
    td.fixed_column {
      width: 190px;
      background-color: red;
    }
    td.non_fixed_column {
      max-width: calc(50% - 190px);
      background-color: yellow;
    }

<table class='main_table'>
      <tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
    </table>

Я не хочу использовать JavaScript для изменения размера ячеек.Я не понимаю, механика на работе здесь!

Answer 1

Вы ищете table-layout: fixed;.

макет таблицы: исправлено; - Ширина таблицы и столбца задается по ширине элементов таблицы и столбца или по ширине первого ряда ячеек. Ячейки в последующих строках не влияют на ширину столбцов.

см .: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

table, td {
      padding: 0px;
      margin: 0px;
      border: none;
      border-collapse: collapse;
    }
    table.main_table {
      width: 100%;
      table-layout: fixed;
    }
    td.fixed_column {
      width: 190px;
      background-color: red;
    }
    td.non_fixed_column {
      background-color: yellow;
    }

<table class='main_table'>
      <tr><td class='fixed_column'>1.1</td>
      <td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
    </table>

Answer 2

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

Пожалуйста, используйте width вместо min-width, мое предложение упоминается ниже, пожалуйста попробуйте.

td.non_fixed_column {
    width: 200px;
    background-color: yellow;
}