테이블 태그의 너비 자동 변경 사용 안 함

Question

숫자 "10"(2 개의 암호 길이) 때문에 마지막 열의 너비가 자동으로 변경되지 않고 어떻게 이런 식으로 테이블을 만들 수 있습니까?

<table> 
    <tr> 
     <td rowspan="3">1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td rowspan="2" colspan="2">7</td> 
    </tr> 
    <tr> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>8</td> 
     <td colspan="2">9</td> 
     <td>10</td> 
    </tr> 
</table> 

와 CSS :

table { 
    border: 1px solid; 
    width: 400px; 
    height: 300px; 
} 

Answer 1

이 재산 table-layout에 의해 트리거 CSS에서 테이블이 알고리즘이 있습니다

• table-layout:fixed가 세포 폭을 적응 무엇 저자 (원하는), 가능한 한 멀리
• table-layout:auto (기본값)은 내용에 셀 너비를 적용합니다. 여기에 CSS

  table { 
      table-layout: fixed; 
      width: 400px; 
      height: 300px; 
      border: 1px solid; 
      } 
  

은 바이올린의 : http://jsfiddle.net/tk4J8/

Answer 2

테이블 컬럼의 폭을 지정하는 column-width를 사용하지 마십시오 - 그건 정말 고정 폭 레이아웃에 대한 의미되지 않도록 브라우저에 대한 suggested optimal guideline . 대신 colgroups을 사용하십시오.

는 스타일 시트에 column-width 스타일을 분리하고 tr 또는 td 태그 전에 table 태그에 이것을 추가 :

<colgroup> 
    <col span="1"></col> 
    <col span="1"></col> 
    <col span="1"></col> 
    <col span="1"></col> 
</colgroup> 

그리고 당신의 스타일이 추가 :

colgroup col { 
    width: 100px; 
} 

jsFiddle합니다.

여기는 Mozilla documentation for it입니다.