중첩 된 CSS 속성이 중첩 테이블에서 작동하도록하려면 어떻게해야합니까?

Question

난 성가신 상황을 발견했습니다. overflow: auto (또는 overflow: none 또는 overflow: scroll)이라는 div 안에 중첩 된 테이블이 있고 테이블의 너비가 창 너비를 초과하면 다이빙이 테이블을 잘라내어 스크롤바 ...해야합니다.

그러나 그 동일한 시나리오를 가져 와서 다른 테이블에 던지면 갑자기 overflow 속성이 중단됩니다. 무슨 뜻인지, 여기에 노동 사건의 예로서

: 브라우저에서이 보면

<div style="border: 1px solid green; overflow: hidden"> 
    <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table> 
</div> 

은 오른쪽에 있지만 빨간색 한, 녹색 테두리가 나타납니다, 왜냐하면 div는 테이블에서 오버플로를 숨기므로 모든 것이 보이기 때문입니다.

비교하는 테이블에 싸여 동일한 코드로 :

<table><tr><td> 
    <div style="border: 1px solid green; overflow: hidden"> 
     <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table> 
    </div> 
</td></tr></table> 

당신은 두 요소가 페이지를 오버 플로우 때문에 권리 국경이 없다는 것을 볼 수 있습니다; div가 절대 테이블을 제한하지 않았기 때문에 두 개의 경계선을 충분히 볼 수 있습니다.

TD가 다른 요소와 다른 방식으로 너비를 계산하므로 TD 내부의 div가 제대로 오버플로 할 수 없기 때문에 100 % 너비가 잘못 되었기 때문에 발생할 수 있습니다. 내가 원하는 것을 잘못 말한 것).

누군가가 "테이블 내부"케이스에서 적절한 오버플로 동작을 얻는 방법을 알아낼 수 있습니까?

Answer 1

슬프게도 바깥 쪽 테이블을 제거하여이 문제를 해결해야했습니다 (레이아웃을 완전히 수정해야 함). 그래도 다른 방법이 있다면 듣고 싶습니다.

Answer 2

다른 div로 테이블을 감싸기 만하면됩니다.

<div style="overflow: hidden"> 
<table><tr><td> 
    <div style="border: 1px solid green; overflow: hidden"> 
     <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table> 
    </div> 
</td></tr></table> 
</div>