Making two of 4 columns equal width

Question

I have a table (width: 100%) with 4 columns. Column 1 and 3 are set to a fixed width of 190px. I want the remaining two columns to be of equal width no matter how wide the table gets. I've tried using <colgroup style='width: 50%'> for each grouping of two columns. I've tried using the calc function calc(50% - 190px) on each of the table columns via css. I've also used different combinations of max and min widths. All attempts fail once one column is forced to grow due to content. And the content is text, so it should wrap instead of override the width. Here's my html and 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>

This gives me a perfect result... until one of the cells has content that causes one column to grow. I don't care how tall a cell/row gets.

    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>

I do not want to use javascript to resize the cells. I don't understand the mechanics at work here!

Answer 1

You are looking for the table-layout: fixed;.

table-layout: fixed; - Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

see: 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>