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

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

+3

html css position colgroup

notthehoff May 12 '15 at 12:45

source to share

No one has answered this question yet

Check out similar questions:

2639

How can I disable browser autocomplete on a web form field / input tag?

1777

How do CSS triangles work?

1270

Why don't self-closing script elements work?

1014

How to center an absolutely positioned element in a div?

442

How to center the "position: absolute" element

327

Position is absolute, but relative to the parent

46

Unable to display HTML string

2

CSS position: fixed working for header but not footer

1

Positioning absolute elements in a scrollable div

0

Why doesn't the word break work here?

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

More articles: