Question

我的最终目标是创建一个具有第一列的表，该列保持原位，但其他列水平滚动。我找到了一些其他解决方案，但我很好奇为什么colgroup和绝对不能一起工作。

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

当我取消注释位置并离开时，红色不再出现。

位置如何：绝对;和colgroup标签一起工作？

0 个答案: