내부 테이블이 부분적으로 숨겨져 스크롤 될 수 있도록 div 스타일을 지정하는 방법

테이블이 있고 div의 높이까지만 테이블이 표시되도록 스크롤 할 수 있도록 div에 넣고 싶습니다. 나머지 테이블을 볼 수 있습니다. 내부 테이블이 부분적으로 숨겨져 스크롤 될 수 있도록 div 스타일을 지정하는 방법

#listTimes { 
 
    margin-right: 0; 
 
    height: 100px; 
 
} 
 

 
#timesList table { 
 
    border-collapse: collapse; 
 
    margin: 0 auto; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
#timesList table, td, th { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
#timesList th { 
 
    text-align: left; 
 
} 
 

 
#session { 
 
    border-radius: 5px 5px 0 0; 
 
    height: 10px; 
 
    width: 20%; 
 
    margin: 0 auto; 
 
}

<html> 
 
    <body> 
 
    <div class="listTimes"> 
 
     <form id="session"> 
 
\t   <select name="sessions" onchange="showUser(this.value)"> 
 
\t    <option value="1">Session 1</option> 
 
\t    <option value="2">Session 2</option> 
 
\t    <option value="3">Session 3</option> 
 
\t    <option value="4">Session 4</option> 
 
\t    <option value="5">Session 5</option> 
 
\t   </select> 
 
\t   </form> 
 
\t   <br> 
 
\t   <div id="timesList"> 
 
      <!-- This is where the table is --> 
 
      <table> 
 
       <tr> 
 
       <th>No.</th> 
 
       <th>foo</th> 
 
       <th>bar</th> 
 
       </tr> 
 
       <tr> 
 
       <th>1</th> 
 
       <th>fubar</th> 
 
       <th>lnrbaaet</th> 
 
       </tr> 
 
      </table> 
 
\t   </div> 
 
\t  </div> 
 
    </div> 
 
    </body> 
 
</html>

지금, 테이블에 그냥있는 방법을 나타납니다 여기 내 코드입니다. 나는 폼과 테이블의 높이를 함께 맞추고 싶습니다. 그리고 테이블을 스크롤해서 폼이 나 뒤에 나타나야합니다. 높이 속성, 오버플로 속성을 사용하여이 작업을 시도했지만 어느 것도 작동하지 않습니다.

출처

2017-09-21 Cubetastic

는 overflow-y 속성은

#timesList { 
     margin-right: 0; 
     height: 100px; 
     overflow-y: scroll; 
    }

.listTimes { 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
#timesList { 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
    /* rough width of scrollbar */ 
 
    padding-right: 20px; 
 
    margin-right: -20px; 
 
} 
 

 
#timesList table { 
 
    border-collapse: collapse; 
 
    margin: 0 auto; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
#timesList table, 
 
td, 
 
th { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
#timesList th { 
 
    text-align: left; 
 
} 
 

 
#session { 
 
    border-radius: 5px 5px 0 0; 
 
    height: 10px; 
 
    width: 20%; 
 
    margin: 0 auto; 
 
}

<div class="listTimes"> 
 
    <form id="session"> 
 
    <select name="sessions" onchange="showUser(this.value)"> 
 
\t    <option value="1">Session 1</option> 
 
\t    <option value="2">Session 2</option> 
 
\t    <option value="3">Session 3</option> 
 
\t    <option value="4">Session 4</option> 
 
\t    <option value="5">Session 5</option> 
 
\t   </select> 
 
    </form> 
 
    <br> 
 
    <div id="timesList"> 
 
    <!-- This is where the table is --> 
 
    <table> 
 
     <tr> 
 
     <th>No.</th> 
 
     <th>foo</th> 
 
     <th>bar</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>fubar</th> 
 
     <th>lnrbaaet</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>fubar</th> 
 
     <th>lnrbaaet</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>fubar</th> 
 
     <th>lnrbaaet</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>fubar</th> 
 
     <th>lnrbaaet</th> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

출처

2017-09-21 14:12:18 sol

당신이 말해 주시겠습니까? – Cubetastic

@Cubetastic Updated. ':: - webkit-scrollbar {display : none;} '을 사용할 수는 있지만, Firefox 나 Edge에서 지원되는지 모르겠습니다 ... – sol

'padding-right : 20px; margin-right : -20px;'작동하지 않는다. 단지 스크롤바의 위치를 바꾼다. Z-Index를 낮출 수있는 방법이 있습니까? 그리고 :: :: webkit-scrollbar {display : none;}는 크롬에서는 작동하지만 파이어 폭스에서는 작동하지 않습니다. – Cubetastic

는 "형태는 나를 따라한다"하지만 난 당신이 고정 유지한다는 의미는 생각으로 무엇을 의미하는지 확실하지 #timesList에 height을 설정 추가 . 이 경우 높이와 오버 플로우를 #timesList 요소에 추가해야합니다. 그렇지 않은 경우 #listTimes 요소에 추가하십시오. 내가 나타나는 스크롤 막대를 숨기는 방법

#listTimes { 
 
    margin-right: 0; 
 
    height: 100px; 
 
} 
 
#timesList { 
 
    height: 50px; 
 
    overflow: auto; 
 
} 
 
#timesList table { 
 
    border-collapse: collapse; 
 
    margin: 0 auto; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
#timesList table, td, th { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
#timesList th { 
 
    text-align: left; 
 
} 
 

 
#session { 
 
    border-radius: 5px 5px 0 0; 
 
    height: 10px; 
 
    width: 20%; 
 
    margin: 0 auto; 
 
}

<html> 
 
    <body> 
 
    <div class="listTimes"> 
 
     <form id="session"> 
 
\t   <select name="sessions" onchange="showUser(this.value)"> 
 
\t    <option value="1">Session 1</option> 
 
\t    <option value="2">Session 2</option> 
 
\t    <option value="3">Session 3</option> 
 
\t    <option value="4">Session 4</option> 
 
\t    <option value="5">Session 5</option> 
 
\t   </select> 
 
\t   </form> 
 
\t   <br> 
 
\t   <div id="timesList"> 
 
      <!-- This is where the table is --> 
 
      <table> 
 
       <tr> 
 
       <th>No.</th> 
 
       <th>foo</th> 
 
       <th>bar</th> 
 
       </tr> 
 
       <tr> 
 
       <th>1</th> 
 
       <th>fubar</th> 
 
       <th>lnrbaaet</th> 
 
       </tr> 
 
      </table> 
 
\t   </div> 
 
\t  </div> 
 
    </div> 
 
    </body> 
 
</html>

출처

2017-09-21 14:12:36 sn3ll

와우, 고마워요! 그것은 완전히 작동합니다! 나는 또 다른 실무 답변이 게시 된 것을 보았습니다. 나는 그것을 받아 들일 것입니다. 그러나 기록만을 위해, 두 답이 모두 작동합니다. 나는 2 개의 답을 받아 들일 수 없기 때문에 문자 그대로 이것을하고있다. 하지만 나는 널지지했다! – Cubetastic

내부 테이블이 부분적으로 숨겨져 스크롤 될 수 있도록 div 스타일을 지정하는 방법

답변

관련 문제