[FIXED] How to set explicit td width on column 1, but then white-space: nowrap on remaining td's?

Issue

I've tried doing this, but getting this sort of behavior:

.table {
  overscroll-behavior-x: contain;
  table-layout: fixed;
  overflow: auto;
  border-collapse: collapse;
  border-spacing: 0;
  width: fit-content;
}

.table tbody {
  width: 100%;
}

.row * {
  line-height: 1.7;
}

.row td {
  padding: 12px 24px;
}

.row:nth-child(2n) {
  background: #333333;
}

.row:nth-child(2n + 1) {
  background: #2a2a2a;
}

.row {
  display: table;
  width: fit-content;
  table-layout: fixed;
}

.row td {
  table-layout: fixed;
  white-space: nowrap;
}

.row td:first-child {
  width: 50%;
  white-space: unset;
}

<table class="table">
  <tbody>
    <tr class="row">
      <td>foo</td>
      <td>bar aoidc oaicd oica dij aoidc oaicd oica dij</td>
      <td>baz aoidc oaicd oica dij aoidc oaicd oica dij</td>
    </tr>
    <tr class="row">
      <td>foo</td>
      <td>bar aoidc oaicd oica dij aoidc oaicd oica dij</td>
      <td>baz aoidc oaicd oica dij aoidc oaicd oica dij</td>
    </tr>
    <tr class="row">
      <td>foo</td>
      <td>bar aoidc oaicd oica dij aoidc oaicd oica dij</td>
      <td>baz aoidc oaicd oica dij aoidc oaicd oica dij</td>
    </tr>
  </tbody>
</table>

How do I make the first column 50% of the visible table viewport area, while the remaining 2 columns fit the content they have? That is the last 2 columns are as wide as the widest column's content? (The td 2 and 3 might have arbitrary text content in there, but it will be relatively short, not arbitrary length, and I want it to all fit on one line, on every row).

Solution

Try removing width: fit-content; in both classes and display: table; from the .row class and you will have a flexible table.

.table {
  overscroll-behavior-x: contain;
  table-layout: fixed;
  overflow: auto;
  border-collapse: collapse;
  border-spacing: 0;
  /* width: fit-content; */ /* remove */
}
.row {
  /* display: table; */ /* remove */
  /* width: fit-content; */ /* remove */
  table-layout: fixed;
}

.table {
  overscroll-behavior-x: contain;
  table-layout: fixed;
  overflow: auto;
  border-collapse: collapse;
  border-spacing: 0;
  /* width: fit-content; */
}

.table tbody {
  width: 100%;
}

.row * {
  line-height: 1.7;
}

.row td {
  padding: 12px 24px;
}

.row:nth-child(2n) {
  background: #333333;
}

.row:nth-child(2n + 1) {
  background: #2a2a2a;
}

.row {
  /* display: table; */
  /* width: fit-content; */
  table-layout: fixed;
}

.row td {
  table-layout: fixed;
  white-space: nowrap;
}

.row td:first-child {
  width: 50%;
  white-space: unset;
}

<table class="table">
  <tbody>
    <tr class="row">
      <td>foo</td>
      <td>bar</td>
      <td>baz aoidc oaic</td>
    </tr>
    <tr class="row">
      <td>foo</td>
      <td>bar aoidc oaicd oica dij</td>
      <td>baz</td>
    </tr>
    <tr class="row">
      <td>foo</td>
      <td>bar aoidc</td>
      <td>baz aoidc</td>
    </tr>
  </tbody>
</table>

Answered By - Anton

Answer Checked By - Senaida (PHPFixing Volunteer)