[ Table 크기를 유동적으로 키우고 싶은 경우 ]

Table을 사용할 때 colgroup과 col을 활용하여 열(row)의 크기를 픽스 할 수 있다.

그런데 기본적으로 모든 요소는 부모 요소의 크기보다 커질 수 없다. table 또한 마찬가지이고 col을 활용해서 적용한 width 값들이 table의 부모 요소보다 큰 경우 table은 col에서 설정한 값은 무시하고 알아서(?) 크기를 조율한다.

그런데 부모 요소의 크기와 상관없이 col을 활용해 적용한 width 값을 온전히 적용하고 싶다면, table에 width 값을 max-content로 적용하면 된다.

<div class="table-wrapper">
    <table>
        <colgroup>
            <col style="width:150px">
            <col style="width:200px">
            <col style="width:300px">
            <!-- 여기에 더 많은 col 요소를 추가할 수 있습니다. -->
        </colgroup>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <!-- 여기에 더 많은 th 요소를 추가할 수 있습니다. -->
            </tr>
        </thead>
        <tbody>
            <!-- 여기에 tr 및 td 요소를 추가할 수 있습니다. -->
        </tbody>
    </table>
</div>

.table-wrapper {
    overflow-x: auto;
}

.table-wrapper table {
    width: max-content;
}