如何设计一个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

#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更新。你可以使用':: - webkit-scrollbar {display：none;}'但是我不确定它是否支持Firefox或Edge ... – sol

'padding-right：20px; margin-right：-20px;'不起作用，它仅仅改变滚动条的位置。有没有办法单独降低Z指数？而':: - webkit-scrollbar {display：none;}'可以在Chrome中运行，但不能在firefox中运行，就像你说的那样。 – Cubetastic

不知道你的“的形式应该跟我学”，但我相信你的意思是它应该保持固定的意思设定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的样式，以便内部的表部分隐藏并可以滚动

回答

相关问题