我有一个页面,我们可以根据客户列表动态添加TD。现在,当页面上的TD数量增加时,我希望在页面底部有一个滚动条。我尝试在表的顶部使用div,并在其中添加了以下值:
width: 285px;
height: 100%;
overflow: auto;
但这对我不起作用,下面是我的表格格式,请帮助我在页面底部添加滚动条
<table>
<tbody>
<tr>
<td>
<div>
Select Clients:
</div>
</td>
<td>
<input name="allClients" type="checkbox" onclick="selectAllClients()"><label style="font-weight:bold;">Select All Clients</label>
</td>
</tr>
<tr>
<td>
<div>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
</div>
</td>
<td>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
</td>
<td>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
</td>
</tr>
</tbody>
</table>
发布于 2018-07-25 04:17:06
table td {
min-width: 150px;
}
.scrollMe {
width: 200px;
height: 100%;
overflow-x: scroll;
}
<div class="scrollMe">
<table>
<tbody>
<tr>
<td>
<div>
Select Clients:
</div>
</td>
<td>
<input name="allClients" type="checkbox" onclick="selectAllClients()"><label style="font-weight:bold;">Select All Clients</label>
</td>
</tr>
<tr>
<td>
<div>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
</div>
</td>
<td>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br><input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
</td>
<td>
<input name="clientName" id="clientName" type="checkbox" value="ABC" style="margin-bottom: -2px;" tabindex="6">
<label>
ABC
</label>
<br>
</td>
</tr>
</tbody>
</table>
</div>
https://stackoverflow.com/questions/51506780
复制相似问题