<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <table class="table table-bordered"> <thead> <tr class="text-center"> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> <th> <label class="check-box"> <input type="checkbox" value="" name="" id=""/> <span class="custom-checkmark"></span> </label> </th> </tr> <tr> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> <th>Dummy</th> </tr> </thead> <tbody> <tr> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> <td>Dummy</td> </tr> </tbody> </table> </div> </div>

/*custom check box css start*/ /* The check-box */ .check-box { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .check-box input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .custom-checkmark { position: absolute; top: 0; left: 0; right: 0; height: 15px; width: 15px; margin: auto; background-color: #007bff; } /* On mouse-over, add a grey background color */ .check-box:hover input ~ .custom-checkmark { background-color: green; } /* When the checkbox is checked, add a blue background */ .check-box input:checked ~ .custom-checkmark { background-color: green; } /* Create the checkmark/indicator (hidden when not checked) */ .custom-checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .check-box input:checked ~ .custom-checkmark:after { display: block; } /* Style the checkmark/indicator */ .check-box .custom-checkmark:after { left: 5px; top: 3px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /*custom check box css end*/