Table colspan width 너비 변경 안됨 해결 방법

colspan에 속한 너비를 변경하고 싶을 때 변경되지 않는 경우가 있는데요. 이 경우는 table에 칸 너비를 고정시키기 위해 table-layout : fixed가 적용되어 있기 때문입니다.  이번 시간에는 table-layout : fixed가 적용되어 있는 경우 table 칸 너비를 colgroup으로 변경하는 방법을 알아보도록 하겠습니다.  

 

1. Table colspan width 너비 변경이 안됨

table 칸 너비를 고정하기 위해서 table-layout : fixed를 사용하는데요. th, td 너비가 동일한 비율로 고정되면서 너비 변경이 안됩니다. 

table-layout : fixed_테이블너비고정

 

 

2. colgroup으로 table 너비 변경하기 

[HTML]

<div class="wrap">
    <table>
        <thead>
            <colgroup> 
                <col style="width: 20%;">
                <col style="width: 20%;">   
                <col style="width: 20%;"> 
                <col style="width: 10%;"> 
                <col style="width: 30%;">   
            </colgroup> 
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>        
                <th colspan="2">  colspan 사용 </th>            
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>Cell01</td>
              <td>Cell02</td>
              <td>Cell08</td>
              <td>Cell01</td>
              <td>Cell02</td>
            </tr>
            <tr>
              <td>Cell01</td>
              <td>Cell02</td>
              <td>Cell08</td>
              <td>Cell01</td>
              <td>Cell02</td>
            </tr>
            <tr>
              <td>Cell01</td>
              <td>Cell02</td>
              <td>Cell08</td>
              <td>Cell01</td>
              <td>Cell02</td>
            </tr>
        </tbody>
    </table>
</div>

 

[CSS]

table{width: 600px; table-layout : fixed}
th, td{border: 1px solid #000; background: #fff; word-break: break-all;}

 

 

3. 결과화면 

table-layout : fixed_테이블너비변경

table 칸 개수만큼  colgroup에 <col style="width:  ;">을 넣어주고 너비를 지정해 주면 colspan에 속한 너비를 변경할 수 있습니다.