Add ScrollBar on Table in HTML

Question

I have a page where we are dynamically adding TD's based on the client list . Now when the number of TD's are getting increased on the page i want to have a scroll bar on the bottom of the page . I tried using a div on top of the table and added below values in that :

width: 285px;
height: 100%;
overflow: auto;

But that is not working for me , Below is my table format which i have please help me to add the scroll bar on the bottom of the page

<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>

Answer 1

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>