CSS 테이블 컬럼 폭 : 고정 - 동적 (30 %) - 동적 (70 %) -

Question

고정을 I 테이블 레이아웃의 종류를 획득하는 것을 처리 :

고정 - 동적 (50 %) - 동적 (50 %) -이

http://jsfiddle.net/ihtus/ksucU/

을 고정하지만 이런 종류의를 얻는 방법? 고정 - 동적 (30 %) - 동적 (70 %) -

감사 고정. 이처럼

Answer 1

:

<table> 
    <tr> 
     <td style="width:200px;"> 
     200px width - content 
     </td> 
     <td width="30%"> 
     dynamic width - content 
     </td> 
     <td width="70%"> 
     dynamic width - content 
     </td> 
     <td style="width:100px;"> 
     100px width - content 
     </td> 
    </tr> 
    </table> 

table { 
    width:100%; 
    border-collapse:collapse; 
    table-layout:fixed; 
} 

td { 
    border: 1px solid #333; 
} 

http://jsfiddle.net/7dSpr/

Answer 2

일반적인 접근 방식은 하나의 Monkieboy가 사용 된 것과 동일하지만 인라인 스타일을 피해야한다. (즉, 나는 style="someting"라고 쓰는 것을 의미합니다) html 파일에 있습니다. 대신 클래스와 CSS를 사용해야합니다.

먼저이 <td class="thin-column">text here</td>처럼 TD에게 클래스를 제공, 는 다음 CSS를 사용하는 스타일을 적용합니다 : .thin-column:{ width: 30% }