Html – How can I ensure each table column occupies 25% width, even with fewer columns?

In my previous question, I asked about keeping 4 columns in view, even if there are more than 4 columns.

@G-Cyrillus provided a solution using the cqw unit, which works well. However, I face an issue when I have only two columns. I want these two columns to each occupy 25% of the width.

I tried using max-width with values of 25%, 25cqw, 200px, and also experimented with width: max(...) and width: min(...), but none of these approaches worked.

Is it possible to achieve this?

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <!-- <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th> -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <!-- <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td> -->
      </tr>
      <!-- More rows as needed -->
    </tbody>
  </table>
</div>

* {
  box-sizing: border-box;
  /* Include border and padding in size calculations */
}

.table-container {
  max-width: 80vw;
  overflow: auto;
  container-type: inline-size;  /* Make it a container that you can query its size */
  border: solid;
  margin: auto;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
td {
  width: 25cqw;
  /* Each column occupies 25cqw (25% of the container's width) */
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}