테이블 전체 너비 div

Question

페이지가 고정 너비의 왼쪽 탐색과 오른쪽의 기본 div를 가지며 화면의 나머지 너비를 차지하는 문제를 해결하려고합니다.

오른쪽의 기본 div는 테이블을 포함하기위한 것이고, 주 영역의 전체 너비의 너비에 맞게 테이블을 확장하려고합니다.

CSS에서이 작업을 수행 할 수있는 방법이 있습니까?

<div id="overallDiv"> 

<div id="lhn"> 
Left-hand nav 
</div> 
<div id="mainBody"> 
    <table> 
     <tr><td>A1</td><td>A2</td><td>A3</td></tr> 
     <tr><td>B1</td><td>B2</td><td>B3</td></tr> 
     <tr><td>C1</td><td>C2</td><td>C3</td></tr> 
     <tr><td>D1</td><td>D2</td><td>D3</td></tr> 
    </table> 
</div> 

</div> 

내 CSS이 유사합니다 :

#lhn 
{ 
    display:inline; 
    float:left; 
    width: 100px; 
} 
#mainBody 
{ 
    display:inline; 
    float:left; 
} 

은 어떻게 테이블이 페이지의 나머지 부분을 채울 수

나는이 유사한 코드가?

Answer 1

표 셀 : #overall 표시 표 : 텍스트가 아닌 레이아웃 float를 사용

http://jsfiddle.net/wxnBQ/

​#overallDiv { 
    display: table; 
    width: 100%; 
} 
#lhn, 
#mainBody { 
    display: table-cell; 
} 
#lhn { 
    width: 200px; 
    background: #ddd; 
} 
​#mainBody > table { 
    width: 100%; 
}​ 

그것의 long-in-the-tooth 한 "대출"입니다 효과. "그 당시의 유용한 아이디어"의 무덤에 일찍 갈수록 우리 모두가 나아질 것입니다.

이 경우 가장 적합한 방법은 물론 Flexbox 구현 (W3C proposed specification)을 수행하는 것입니다. 그날이 아직 안 왔어.

Answer 2

나는 다음을 사용 :이 가능한 화면의 100 %에 래퍼를 설정

#overallDiv {width: 100%;} 
#lhn {width: 100px; float: left;} 
#mainBody{float: left;} 
#mainBody table {width: 100%;} 

, 당신의 왼쪽 탐색 100 픽셀 및 #mainBody 남아있는 것의 100 %를합니다.

Answer 3

설정 화면이 시간에 이것이를위한 가장 쉽고 "hackish"방법 display: table 및 display: table-cell을 배치하는 내측 div가

Answer 4

#overallDiv {width: auto; float: left;} 
#lhn {width: 100px; float: left;} 
#mainBody{float: left; width: auto;} 
#mainBody table {width: 100%;}