2017-11-18 3 views
0

"mytable"클래스가있는 div가 오버플로되면 스크롤 막대를 첨부하려고했습니다.캔트 오버플로 내 div에 스크롤바를 첨부 할 관리

이 HTML의 덩어리를 신선한 CSS로 새롭게 만들었지 만 움직일만한 물건이 너무 많아서 이걸 잘못 해석 할 것 같았습니다. 다음은

내가 가진 HTML 구조이며 this는 HTML로 오버 플로우 숨겨진 속성을 제공하는 브라우저

<body> 
<div class="wrapper"> 
     <!-- The Modal --> 
     <div class="modal"> 
      <!-- Modal content --> 
      <div class="modal-content"> 
       <span class="close">&times;</span> 
       <p>Some text in the Modal..</p> 
      </div> 
     </div> 
     <div class="mytable"> 
      <div class="row header"> 
       <div class="cell small"> 
        Kennel 
       </div> 
       <div class="cell small"> 
        Type 
       </div> 
       <div class="cell medium"> 
        Name 
       </div>...and bunch more rows 

에 보이는 방법이며 몸은 일반 스크롤 막대를 제거하지만 난을 연결하는 관리 캔트 스크롤 막대를 클래스 이름이 "mytable"인 테이블로 사용

비슷한 게시물에 언급 된대로 높이 또는 너비에 고정 된 크기를 사용하려고 시도했지만 그 중 아무 것도 작동하지 않는 것 같습니다.

html, body { 
    height: 100%; 
    overflow: hidden; 
} 

.wrapper { 
    margin: 0 auto; 
    padding: 40px; 
    max-width: 800px; 
} 

.mytable { 
    height: 100%; 
    overflow: auto; 
    margin: 0 0 40px 0; 
    width: 100%; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
    display: table; 
    table-layout: fixed; 
} 
+0

'.mytable'에서'overflow : auto;'보다는'overflow : scroll; '을 사용하려고 했습니까? – Adriano

+0

옙 분명히 – Thasd

+0

코드를 좀 더 공유하여 문제를 더 잘 이해할 수 있습니까? – Adriano

답변

2
테이블에서 '블록'또는 무엇에 .mytable의 디스플레이 속성을 변경

('테이블'과 '인라인'요소 제외). 그것은 스크롤을 보여주는 시작됩니다

+0

덕분에 좀 고맙다고 생각했지만 높이를 고정시킬 때까지 스크롤 막대를 망가 뜨린 에 고정 된 높이를 부여하기 전까지는 – Thasd

0

오버 플로우를 사용해보십시오 : 이동;

스크롤 막대가 있어야합니다.

+0

이 표시 테이블에는 작동하지 않습니다. 요소가 넘칠 경우 'auto'와 같은 영향을줍니다. – santosh