Chrome에서 CSS 표와 최대 너비가 작동하지 않습니다.

Question

이것은 내 CSS 코드입니다.

#wrap { 
    width:50em; 
    max-width: 94%; 
    margin: 0 auto; 
    background-color:#fff; 
} 

#head { 
    width:50em; 
    height:10em; 
    max-width: 100%; 
    margin: 0 auto; 
    text-align:center; 
    position: relative; 
} 

#css-table { 
    display: table; 
    margin: 1em auto; 
    position: relative; 
    width:50em; 
    max-width: 100%;    
} 

#css-table .col { 
    display: table-cell; 
    width: 20em; 
    padding: 0px; 
    margin: 0 auto; 
} 

#css-table .col:nth-child(even) { 
    background: #fff; 
} 

#css-table .col:nth-child(odd) { 
    background: #fff; 
    border-right: 4px double #b5b5b5; 
} 

내 HTML 코드;

Firefox 창을 확대/축소 할 때 테이블은 300px 너비의 뷰포트까지 잘 조절됩니다 ... 원하는대로. 그러나 크롬에서는 뷰포트가 50em보다 넓은 경우에만 표가 정상적으로 보입니다. Chrome 창을 좁히면 표의 오른쪽에 표가 블리드 아웃됩니다.

Chrome에서이 작업을 수행하는 이유가 있을까요?

Answer 1

max-width property

는 DIV를 만들고 그것을 블록 및 최대 폭을 표시하는 스타일링을 준다. 전통적인 <table>을 사용하고 100 % 너비로 스타일을 지정할 수 있습니다. 내가 찾은

Answer 2

최대 너비는 블록 요소에만 적용되어야하기 때문에 Chrome은 규칙을 준수합니다. MSDN 워드 프로세서에서

는 :

최소 폭/MAX-width 속성 부동 적용 절대적 위치 블록과 인라인 블록 요소뿐만 아니라 일부 제어 극한 . 테이블 행 및 행/열 그룹과 같이 대체되지 않는 인라인 요소에는 적용되지 않습니다. (A "대체"원소 또는 이러한 IMG textArea의 극한 같은 치수를 갖는다.)

테이블 (또는 경우 디스플레이 표) 기술적 작동 안되거나 지원 될 수있다. FF는 분명히 괜찮은 편이지만, 디스플레이를 제거하거나 테이블 또는 최대 너비는 인 다른 해결책을 제시해야합니다.

MSDN Doc

Answer 3

이 솔루션은 table-layout: fixed 내가 필요로 그냥 어떤 width: 100%을