table태그를 수정하다보면 스타일로

table-layout:fixed 쓰는 경우가 있다 ( 사실 자주씀 테이블 틀어지면 안되니까..)

근데 이렇게 fixed를 쓰고 있는 동안에 colspan 을 써주어야 하는 경우가 발생하는데

이런경우 colspan으로 합친 셀 말고 분리되어있는 셀의 width가 거의50% 50%으로 고정이 되어버린다

그러니까, 테이블에다가는 table-layout:fixed 를 주고 위 tr은 2개의 셀을 병합, 아래tr은 두개의 셀을 분리한다고 가정해보자.

위에 줄은 colspan="2"으로 셀 병합을 하고, 밑에줄은 td나 th 등으로 구분이 될건데,

이때, 밑에줄에 2개의 td의 width를 다르게 주고 싶다.

앞의 셀은 width를 20%로, 뒤의 셀의 width는 80%로 주고 싶은데,

table-layout:fixed 를 하게 되면 자동으로 셀 크기가 정해져버린다. (´-ι_-｀) (절레)(절레)

이 떄 할 수 있는 방법이 colgroup 을 사용하는 것이다.

<table style="table-layout:fixed;">
  <colgroup>
  	<col style="width:20%"/>
  	<col style="width:80%" />
  </colgroup>
  <tr>
    <th colspan="2" >합친셀</th>
  </tr>
  <tr>
    <th >앞의 셀</th>
    <th >뒤의 셀</th>
  </tr>
</table>

이렇게 내가 만들고 싶은 테이블의 tr 과 td를 써주기는 하는데

그 위에다가 colgroup 과 col 을 써주는 것이다. 이때 내가 원하는 td의 개수만큼 col을 써주어야 한다.

(colspan적용하지 않은 td의 갯수만큼)

그러면 col이 정한 width대로 너비 조절이 가능하다