KNOW-HOW/STYLE
[ Table 크기를 유동적으로 키우고 싶은 경우 ]
Table을 사용할 때 colgroup과 col을 활용하여 열(row)의 크기를 픽스 할 수 있다. 그런데 기본적으로 모든 요소는 부모 요소의 크기보다 커질 수 없다. table 또한 마찬가지이고 col을 활용해서 적용한 width 값들이 table의 부모 요소보다 큰 경우 table은 col에서 설정한 값은 무시하고 알아서(?) 크기를 조율한다. 그런데 부모 요소의 크기와 상관없이 col을 활용해 적용한 width 값을 온전히 적용하고 싶다면, table에 width 값을 max-content로 적용하면 된다. Header 1 Header 2 Header 3 .table-wrapper { overflow-x: auto; } .table-wrapper table { width: max-content; }
