CSS: table-layout: fixedを使っても自動調節させる

Question

table-layout: fixed;とcolgroupを使っても最初以外自動的に幅を調節したい

<table>
    <colgroup>
        <col span="1" style="width: 1000px">
        <col span="2">
        <col span="2">
    </colgroup>
    <tr>
        <td> </td>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

table {
    width: fit-content;
    table-layout: fixed;
    border-collapse: collapse;
    border: 2px solid rgb(100, 100, 100);
}



td,
th {
    border: 1px solid rgb(100, 100, 100);
    padding: 10px 10px;
}

このようにやるとテーブルがずれてしまいます。
最初のコラムだけ100pxにしてあとは自動調節するにはどうすればいいですか？

Answer 1

セルの内容に合わせて幅を調節するという解釈でよろしいでしょうか？

table-layoutについてはこちらのサイトがわかりやすいと思います。
スタイルシートリファレンス(table-layout)

自動的に幅を調節したいとの事ですが、
fixedは固定幅にするものなので、autoに変えてください。

table {
    width: fit-content;
    table-layout: auto;
    border-collapse: collapse;
    border: 2px solid rgb(100, 100, 100);
}

あと<col span="1" style="width: 1000px">になっているので100pxに直してください。

---追記---

Comments

[Nippun]

できませんでした。
最初のコラムだけ１００pxにして残りを自動調節にできますか？

[退会済みユーザー]

回答に追記しました。
私の再現では画像のようになっているのですが、
Skillカラムを100pxにして、残りのカラムは画面幅いっぱいに伸ばしたいということでしょうか？

[Nippun]

できました！ありがとうございます

[退会済みユーザー]

よかったです！