在HTML表格上添加ScrollBar

时间：2018-07-24 20:10:08

标签： html css

我有一个页面，我们在其中基于客户端列表动态添加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>

1 个答案:

答案 0 :(得分：0)

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>

相关问题
最新问题