오버 플로우 엑스 : 자동

Question

를 작동하지 않는 나는 다음과 같은 CSS와 HTML 코드가 있습니다

#container { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 
.table-container { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    _overflow: auto; 
 
}

<div id='container'> 
 
    <div class='table-container'> 
 
    <table> 
 
     <tr> 
 
     <th>Example</th> 
 
     </tr> 
 
     <tr> 
 
     <td>blablablablablablablablablablablablablablablablablablablablablablablablabla</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

이

내 문제가 overflow-x: auto 메인 용기에 때문에 display: table을 작동하지 않는입니다. display: table 속성을 유지해야합니다. 컨테이너 div 너비가 그 안에있는 내용과 같기를 원하기 때문입니다. 디스플레이를 사용하여 오버플로 작업을 유지하는 방법 : 기본 컨테이너의 테이블?

Answer 1

당신이 찾고있는 종류입니까?

편집 : 귀하의 문제는 높이라고 생각합니다. 콘텐츠에 따라 수동으로 지정해야합니다. 당신은 내용이 무엇인지 알고 있다면 당신은 테이블 컨테이너의 높이를 추가 자바 스크립트를

.container { 
 
     display: table; 
 
     width : 100%; 
 
     position: relative; 
 
    } 
 
    .table-container { 
 
     position : absolute; 
 
     left: 0; 
 
     right:0; 
 
     overflow-y: auto; 
 

 
    } 
 
    #scroller{ 
 
     height:100px; 
 
     
 
    }

<div class='container' id="scroller"> 
 
    <div class='table-container'> 
 
     <table> 
 
      <tr> 
 
       <th>Example</th> 
 
      </tr> 
 
      <tr> 
 
       <td>blablablablablablablablablablablablablablablablablablablablablablablablabla</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<div class='container'> 
 
    <p> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 

 

 
    </p> 
 
</div>