As position: absolute; and the colgroup tag works together?

Question

As position: absolute; and the colgroup tag works together?

My ultimate goal is to create a table that has the first column that stays in place, but the other columns scroll horizontally. I've found some other solutions, but I'm curious as to why colleagues and absolute don't work together.

Html

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="stylesheet">
    <title>Test Table</title>
</head>
<body>

    <p>Table with colgroup and col</p>
    <div class = "container">
    <table>
      <colgroup>
        <col class="column1">
        <col class="columns2plus3" span="2">
      </colgroup>
      <tr>
        <th>Lime</th>
        <th>Lemon</th>
        <th>Orange</th>
      </tr>
      <tr>
        <td>Green</td>
        <td>Yellow</td>
        <td>Orange</td>
      </tr>
    </table>
    </div>
</body>
</html>

CSS

table {
    width: 400px;
    table-layout: fixed;
    border: 1px solid purple;
}

.container {
    width : 300px;
    overflow: scroll;
}

td, th{
    border: 1px solid black;
    width: 50px;
}


.column1 {
    background-color: red;
    width: 200px;
/*  position: absolute;
    left: 0;*/
}


.columns2plus3 {
    width: 400px;
    padding-left: 500px;
}