테이블 레이아웃 문제 - Firefox 대 Chrome 및 IE7

HTML 표 (표 형식의 데이터)를 레이아웃하려고하는데 Firefox 3.5 및 Chrome 2.0.172 (EDIT 및 IE7 - Chrome과 같은 표를 렌더링 함)에서 다르게 렌더링됩니다. 않습니다). ,테이블 레이아웃 문제 - Firefox 대 Chrome 및 IE7

이

div#listcontainer { 
    position: relative; 
    float: left; 
    width: 98%; 
    padding: 0; 
    border: 1px; 
    overflow-x: scroll; 
} 

table.tasklist { 
    width: auto; 
    table-layout: auto; 
    border: thin solid; 
    font-size: 9pt; 
    border-collapse: collapse; 
    empty-cells: show; 
} 

col.narrow { 
    min-width: 50px; 
} 
col.wide { 
    min-width: 200px; 
}

파이어 폭스에서 테이블이 포함 된 사업부보다 넓은 렌더링 :

내가 사업부 내부에 테이블이 있습니다

<div id="listcontainer"> 
    <table class="tasklist"> 
    <colgroup> 
     <col class="narrow" /> 
     <col class="wide" /> 
     {{ more column definitions here }} 
    </colgroup> 
{{ various code here }} 
    </table> 
</div>

그리고 사업부 및 테이블 CSS를 가지고 div의 스크롤바를 사용하면 추가 열로 스크롤 할 수 있습니다 (의도 한 동작 임). 그러나 Chrome과 IE7은 열의 최소 너비 속성을 무시하고 전체 표를 포함 된 div로 밀어 넣습니다. 어느 쪽이 이 아니고, 내가 원하는 것을합니다. 내가 도대체 뭘 잘못하고있는 겁니까?

EDIT

:는 I 대신 COLGROUP 사용의 th 및 td 소자 자체의 최소 폭의 요소를 넣고, 그것은 세 브라우저에서 예상대로 렌더링한다. Chrome에서 요소를 검사하면 계산 된 스타일이 div에 맞게 열 너비를 렌더링했음을 나타냅니다.

출처

2009-07-04 Technical Bard