table width 조절에 사용하는 colgroup과 col

 

colgroup & col in table

 

 

테이블을 만들고 콘텐츠 크기에 따라 열의 길이와 높이를 조절하는 게 필요한 순간이 있죠.

 

근데 열의 길이에 해당하는 width가 좀처럼 뜻대로 모양새를 바꿔 주지 않아 시간을 낭비하는 경우가 많아요.

 

style로 width를 바꿔도 꼼짝도 하지 않을 때는 table에 감춰진 설정을 조정해야 합니다. 그 해답은 table-layout을 auto에서 fixed로 바꾸는 것에서 시작해요. 

 

auto에서는 콘텐츠 길이에 따라 자동 조절되는 편의가 있는데, 문제는 상대적으로 긴 콘텐츠가 등장할 때는 전체 틀이 헝클어진다는 점이에요.

 

하나의 열 witdth가 길어지면 그 이전은 그대로 두면서 옆으로 이어지는 열의 길이가 축소됩니다. 한 줄의 테이블이 두 줄로 바뀌는 순간이죠.

 

이걸 자유롭게 움직이지 못하게 만드는 1차 설정이 바로 table-layout을 fixed 하는 겁니다.

 

이에 대한 설정은 table에 직접 부여하거나 css로 다루는데요.

 

table-layout

<style>
  table {
    table-layout: fixed;
    width: 100%; #table의 상위 dom의 width에 맞추는 방식 
  }
</style>

 

기본적으로 환경을 갖춘 후에는 colgroup을 사용합니다. 위치는 table 단락 최상위예요. thead, tbody보다 위에 자리해야 정상 작동해요.

<table>
  <colgroup>
    <col width="50px">
    <col width="100px">
  </colgroup>
  <tbody>
    <tr>
      <td>첫째 셀</td>
      <td>둘째 셀</td>
    </tr>
  </tbody>
</table>

 

이를 html 환경에 그려보면 다음과 같은 예상대로 테이블 모양이 나와요.

 

열 width 조절

 

colgroup

 

간단한 table에서는 열만 조절하면 그만이나 열병합이 있는 테이블에서 세부 TD를 조절할 수 있어야 해요.

 

colgroup을 전체 열 개수로 확장하고, 병합하는 부분만 colspan으로 접근하면 원하는 대로 테이블을 만들 수 있습니다.

 

<style>
td{text-align: center;}
th{text-align: center;}
</style>
<table style="table-layout: fixed; width: 100%;">
  <colgroup>
    <col width="50px">
    <col width="50px">
    <col width="120px">
    <col width="130px">
  </colgroup>
<thead>
<th colspan="2">오타니</th>
<th>카리나</th>
<th>노부오</th>
</thead>
  <tbody>
    <tr>
      <td>첫째 셀</td>
      <td>둘째 셀</td>
      <td>셋째 셀</td>
      <td>넷째 셀</td>
    </tr>
  </tbody>
</table>

 

 

열의 개수를 병합 전으로 세팅한 후에 흩뜨려놓고, 나중에 수습하는 순서로 다루는 거예요.

 

부분 셀 병합 사례

 

오타니 밑의 셀 두개는 colgroup의 col width를 수정해 상대적으로 다른 길이를 만들 수 있습니다.

 

길이는 px뿐만 아니라 %로도 조절 가능해요.