如何设置 div 的样式以使里面的表格部分隐藏并且可以滚动
Posted
技术标签:
【中文标题】如何设置 div 的样式以使里面的表格部分隐藏并且可以滚动【英文标题】：How to style a div so that the table inside gets partially hidden and can be scrolled 【发布时间】：2018-03-02 22:24:06 【问题描述】：我有一个表格，我想将它放在一个 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">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</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>
</table>
</div>
</div>
</div>
</body>
</html>现在，表格只是按原样显示。我想同时为表格和表格设置一个高度，当我滚动查看表格时，表格应该跟随我。我尝试使用高度属性、溢出属性，但它们都不起作用。
【问题讨论】：
【参考方案1】：不确定您所说的“表格应该跟随我”是什么意思，但我认为您的意思是它应该保持不变。在这种情况下，您需要将高度和溢出添加到 #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">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</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>
</table>
</div>
</div>
</div>
</body>
</html>【讨论】：
哇，谢谢！它完全有效！我看到另一个有效的答案也已发布，我将接受这一点，但为了记录，您的两个答案都有效。我实际上只是这样做，因为我不能接受 2 个答案。但我支持你！【参考方案2】：在#timesList 上添加overflow-y 属性集height
#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)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</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>【讨论】：
你能告诉我如何隐藏出现的滚动条吗？ @Cubetastic 已更新。您可以使用::-webkit-scrollbar display: none;，但我不确定它是否支持 Firefox 或 Edge...
padding-right: 20px; margin-right: -20px; 不起作用，它只是改变了滚动条的位置。有没有办法单独降低z-index？ ::-webkit-scrollbar display: none; 可以在 chrome 中使用，但不能在 Firefox 中使用，就像你说的那样。
除了::-webkit-scrollbar 我不知道隐藏滚动条的另一种方法。它应该可以正常工作，就像在我的 sn-p 中一样。你能提供一个你的标记的演示吗？可能因为其他影响它而无法正常工作以上是关于如何设置 div 的样式以使里面的表格部分隐藏并且可以滚动的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Tailwind 为类似于 HTML 表格的内容设置样式