겹침없이 테이블이 너무 커서 셀 내용이 너무 커서

Question

화면을 가로로 채우지 만 커지지는 않는 테이블을 만들고 싶습니다. 한 테이블 셀에서 너무 큰 경우 가로 스크롤 막대를 사용하여 표시되는 임의의 크기로 내용을 넣어야합니다.

이 있지만, 때문에 "테이블 레이아웃 : 고정"의 스크롤 작동

<table style="table-layout:fixed; width:100%;"> 
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr> 
    <tr><td colspan=2> 
     <div style="width:100%; overflow-x:auto;"> 
CONTENT_WITH_ARBITRARY_WIDTH_AND_HEIGHT_THE_TABLE_CELL_SHOULD_DISPLAY_HORIZONTAL_SCROLLBARS_BUT_SHOULD_GROW_VERTICALLY_NORMALLY 
     </div> 
    </td></tr> 
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr> 
    </table> 

가 : 테이블이 사용할 수있는 공간과 디스플레이 내용에 따라 테이블의 크기를 조정하기위한 모든 능력을 상실

나는이 시도. 내용이 완전히 동적이어서 열이 필요한 공간을 알 수있는 방법이 없기 때문에 필요합니다. 그러나 어느 열이 사용 가능한 공간 (따라서 100 % 너비 열)에 대해 탐욕해야하는지 알고 있습니다.

즉, 위 예제에서 "DONT OVERLAP ME"부분과 겹칩니다.

이

<table style="table-layout:fixed; width:100%;"> 
    <tr><td> 
    <table style="width:100%;"> 
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr> 
    <tr><td colspan=2> 
     <div style="width:100%; overflow-x:auto;"> 
CONTENT_WITH_ARBITRARY_WIDTH_AND_HEIGHT_THE_TABLE_CELL_SHOULD_DISPLAY_HORIZONTAL_SCROLLBARS_BUT_SHOULD_GROW_VERTICALLY_NORMALLY 
     </div> 
    </td></tr> 
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr> 
    </table> 
    </td></tr> 
    </table> 

다음

중복이 고정되어 있지만 어떤 이유로 내부 테이블이 그냥 다른 테이블 안에없는 화면 가장자리를 넘어 성장하고 결코 무시가 스크롤 막대를 표시

그래서 나는이 시도 . (나는 이것이 다시 "table-layout : fixed"의 증상이라고 생각합니다.)

오버랩을 피하고 가로 스크롤 막대가있는 테이블 셀을 사용할 수 있습니까?

Answer 1

<div style="max-width:100%; overflow-x:scroll;"> 

CONTENT_WITH_ARBITRARY_WIDTH_AND_HEIGHT_THE_TABLE_CELL_SHOULD_DISPLAY_HORIZONTAL_SCROLLBARS_BUT_SHOULD_GROW_VERTICALLY_NORMALLY 코드에서 폭 = 100 %가

주, 최대 폭은 다음 콜론 후 100 %