첫 번째 행의 셀이 여러 열을 포괄하는 경우의 열 너비

Question

첫 번째 행의 셀이 여러 열을 포괄 할 때 고정 폭 레이아웃을 사용하여 지정된 너비를 갖는 테이블의 열 너비를 지정하려면 어떻게해야합니까?

다음 코드를 사용하면 첫 번째 열이 원하는 너비 인 100px이됩니다. 3 다른 열은 동일한 너비를 얻습니다. 이는 내가 원하는 것이 아닙니다. 어떻게 열 2가 너비 200px, 열 3이 400px, 열 4가 채워지는지 채우게하려면 table-layout: fixed을 사용 하시겠습니까?

<table style="width: 100%; table-layout: fixed;"> 
    <tr> 
     <td style="width: 100px">First cell</td> 
     <td colspan="3">Spanning cell</td> 
    </tr> 
    <tr> 
     <td style="background: red">1</td> 
     <td style="width: 200px; background: blue">2</td> 
     <td style="width: 400px; background: green">3</td> 
     <td style="background: yellow">4</td> 
    </tr> 
</table> 

Answer 1

당신은 사용할 수 있습니다 colgroup 및 col :

<table style="width: 100%; table-layout: fixed;"> 
    <colgroup> 
     <col style="width: 100px;"> 
     <col style="width: 200px;"> 
     <col style="width: 400px;"> 
    </colgroup> 
    <tr> 
     <td>First cell</td> 
     <td colspan="3">Spanning cell</td> 
    </tr> 
    <tr> 
     <td style="background: red">1</td> 
     <td style="background: blue">2</td> 
     <td style="background: green">3</td> 
     <td style="background: yellow">4</td> 
    </tr> 
</table> 

http://jsfiddle.net/07mno6r5/

과 같이 열 너비를 설정하는 COLGROUP을 사용 할 수

Answer 2

: JSFiddle

: 여기

<table style="width: 100%; table-layout: fixed;"> 
<colgroup> 
    <col style="width: 100px"/> 
    <col style="width: 200px;"/> 
    <col style="width: 400px"/> 
    <col style="width: auto"/>    
    </colgroup> 
    <tr> 
    <td>First cell</td> 
    <td colspan="3">Spanning cell</td> 
    </tr> 
    <tr> 
    <td style="background: red">1</td> 
    <td style="background: blue">2</td> 
    <td style="background: green">3</td> 
    <td style="background: yellow">4</td> 
    </tr> 
</table> 

은 예입니다