文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >在HTML表中添加ScrollBar

问在HTML表中添加ScrollBar
EN

Stack Overflow用户
提问于 2018-07-25 04:10:08
回答 1查看 69关注 0票数 0

我有一个页面，我们可以根据客户列表动态添加TD。现在，当页面上的TD数量增加时，我希望在页面底部有一个滚动条。我尝试在表的顶部使用div，并在其中添加了以下值：

代码语言：javascript
复制
width: 285px;
height: 100%;
overflow: auto;

但这对我不起作用，下面是我的表格格式，请帮助我在页面底部添加滚动条

代码语言：javascript
复制
<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>
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-25 04:17:06

​

代码语言：javascript
复制
table td {
  min-width: 150px;
}

.scrollMe {
width: 200px;
height: 100%;
overflow-x: scroll;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51506780

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档