2011-04-20 4 views
18

here에서 WebKit (Safari 5, Chrome 10.0.648.205) 및 Mozilla (FF 4)는 모두 브라우저 창의 보이는 너비에 DIV div를 유지하면서 TABLE은 그 내용만큼 넓습니다.DIV가 포함 된 것보다 넓은 표

나는 DIV가 TABLE만큼 넓어지기를 기대하지만, 브라우저마다 동작이 동일하기 때문에 이것이 버그가 아닌 기능이라고 생각됩니다.

DIV가 float : left, it does grow as wide as the table으로 설정되면 흥미롭게도.

설명이 있으십니까?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<title>Wide Table</title> 
<style> 

#container { 
    background-color:blue; 
/* float:left;*/ 
} 

</style> 
</head> 
<body> 
    <div id="container"> 
    <table > 
     <tr id="tr"> 
     <td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html> 
+2

귀하의 질문에 대한 답변을 내 질문! 플로트 "성장"은 제가 찾고 있던 것입니다. 디스플레이를 인라인 블록으로 설정하는 것도 효과적이며 궁극적으로 내가 정착 한 것입니다. – Chris

답변

25

블록 요소는 내용의 너비가 아닌 기본적으로 부모의 너비를 사용합니다. 다른 한편으로 높이는 다른 방법으로 작동합니다. 블록 요소는 부모의 높이보다는 기본적으로 내용의 높이를 사용합니다. HTML/CSS는 영어 텍스트의 위쪽에서 아래쪽 레이아웃으로 만들어지기 때문에 이런 식으로 작동합니다.

그래서, 당신의 #container 다음 <body>의 폭과 외부 #container <table> #container 내부 오버 플로우를합니다. overflow: hidden#container에 붙이면 <table>, overflow-x: auto;#container에 올리면 스크롤바가 추가됩니다.

UPDATE은 : 한국인 플로팅 소자에 관한 한 상기 CSS3 spec이 말하고있다 : 사용되는 경우 즉 '자동'가 아니면

'폭'의 사용 값이 계산 된 값이며 value는 shrink-to-fit 너비입니다.

기본 폭 것이다 자동 정도로 shrink-to-fit 그것은이다

수축에 끼움 폭 계산 자동 테이블 레이아웃 알고리즘을 사용하여 표 셀의 폭을 계산 비슷 . 대략적으로 : 명시적인 줄 바꿈이 발생하는 위치 이외의 줄을 끊지 않고 내용의 서식을 지정하여 원하는 너비를 계산하고 가능한 모든 줄 바꿈을 시도하여 원하는 최소 너비를 계산합니다.

그래서 떠 #container<table> 아이의 전체 폭에 걸릴 것이다 <table>에는 가능한 줄 바꿈이 없습니다.

+1

플로트는 인라인 블록 및 테이블 셀처럼 [shrink-to-fit] (http://www.w3.org/TR/CSS21/visudet.html#float-width) 알고리즘을 사용합니다. 콘텐츠 컨테이너의 너비를 계산할 수 –

+0

@ Youval : 내 업데이 트하기 전에 표준에있어 것 같습니다. 후손을 위해 CSS3 작업 초안에 대한 링크를 추가했습니다. –

-3

일반적으로 div의 크기를 설정하고 div에 맞게 테이블을 조정합니다. 그 통찰력이 도움이되는지 아닌지 확실하지 않습니다.

관련 문제