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.


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

    <p>Table with colgroup and col</p>
    <div class = "container">
        <col class="column1">
        <col class="columns2plus3" span="2">



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.


source to share

All Articles