오버 플로우가있는 크기 조정 div

Question

이 질문은 일부 경우 어리석은 것으로 보일 수 있습니다. 내 사과, 나는 CSS로 그 savy 아니에요.

이제 두 개의 열이있는 표가 있습니다 (동일해야 함). 테이블 너비는 100 %로 설정되며 페이지의 크기를 조정해야합니다.

헤더, 괜찮습니다. 2-3 단어로 구성된 2 개의 셀만 포함되므로 아무런 문제가 없습니다.

이제 다음과 같은 각 셀에는 꽤 큰 텍스트가 포함되어 있으므로 그대로 표시해야합니다 (줄 바꿈 없음).

내가 무슨 짓을 :

<style> 
.contentDiv 
{ 
     display: inline-block; 
     overflow-x:auto; 
     overflow-y:hidden; 
     white-space: nowrap; 
     white-space: nowrap; 
} 
</style> 

<table style="width:100%"> 
    <th> 
    <tr><td with="50%">head 1</td><td width="50%">head 2</td></tr> 
    </th> 
    <tbody> 
    <tr> 
     <td><div class="contentDiv">big-text-here</div></td> 
     <td><div class="contentDiv">big-text-here</div></td> 
    </tr> 
    </tbody> 
</table> 

결론이 나는 테이블, 내부 컨텐츠 세포가 얼마나 큰 상관없이 테이블 폭과 텍스트 (의 절반이없는 것으로 전체 폭을 갖고 싶어입니다 그것은 레이아웃을 변경하지 마십시오 (내용이 필요한 서페이스보다 크면 스크롤바가 나타납니다).

감사합니다.

Answer 1

나는 좀 당신이 무슨 뜻인지 알지 못했다,하지만 난 당신이 http://jsfiddle.net/mDXb5/은 또한 당신이 편집해야 그 위의 코드에 약간의 문제가 있었다 의미 확신합니다. 예 :

</table> tag is missing instead you use </tr> which is wrong 

Answer 2

이렇게하면 줄 바꿈이 없어야합니다.

td { position: relative; } 
.contentDiv 
{ 
    display: inline-block; 
    overflow-x:auto; 
    overflow-y:hidden; 
    white-space: nowrap; 
    white-space: nowrap; 
    position: absolute; 
}