How does position: absolute; and the colgroup tag work together?

My final goal is to create a table that has a first column that remains in place, but the other columns horizontally scroll. I have found some other solutions, but am curious as to why colgroup and absolute do not seem to 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;
}

When I uncomment the position and left, the red color no longer appears.

Recommended topics

Hot tags