How to Ensure Each Table Column Occupies 25% Width and Allows Horizontal Scrolling in HTML/CSS?

I'm trying to make each column in my table 25% wide so that only four columns fit within the table. When there are more than four columns, I want the table to scroll horizontally. Here's my current attempt:

.table-container {
    max-width: 100%; /* Adjust this as per your layout */
    overflow-x: auto;
}
table {
    width: auto; /* Let the table size itself based on content */
    min-width: 100%; /* Ensure table fills its container */
    border-collapse: collapse;
}
th, td {
     width: 25%; /* Each column occupies 25% of table width */
     border: 1px solid #ddd;
     padding: 8px;
     text-align: left;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <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>
</body>
</html>

I expected each column to occupy exactly 25% of the table width, but it's not behaving as intended. How can I adjust this to ensure that exactly four columns are visible without horizontal scrolling, and that additional columns trigger horizontal scrolling as needed?

Solution

You can give a try to container size units and declare a containment context on the parent and use table-layout:fixed; width:100% for the table.

example to test through different browsers , hopefully, it should nowdays be widely implemented.

* {
  box-sizing: border-box;
  /* minds border and padding into size calculation*/
}

.table-container {
  max-width: 80vw;
  overflow: auto;
  container-type: inline-size;  /* make it a container that you can querie 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 container's width */
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

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