Как позиционирование: абсолютное; и тег colgroup работают вместе?

Моя последняя цель - создать таблицу, в которой первый столбец остается на месте, а остальные столбцы прокручиваются по горизонтали. Я нашел некоторые другие решения, но мне любопытно, почему colgroup и absolute не работают вместе.

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

Когда я раскомментирую позицию и ушел, красный цвет больше не появляется.

Источник

0 ответов

Другие вопросы по тегам