<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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <h3>Thông tin khách hàng</h3> <div class="col-md-3"> <form action="#" method="get"> <div class="input-group"> <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH --> <input class="form-control" id="system-search" name="q" placeholder="Tìm kiếm" required> <span class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </span> </div> </form> </div> <br><br> <button class="ex1">Thêm khách hàng</button><br> <br> <table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Mã khách hàng</th> <th>Tên khách hàng</th> <th>Email</th> <th>SĐT</th> <th>Giới tính</th> <th>Địa chỉ</th> <th>Mã TKNV</th> <th>Mã Nhóm KH</th> <th>Ghi chú</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> <tr> <td>1</td> <td>Hoàng Hữu Tài</td> <td>taihh@gmail.com</td> <td>0123123132</td> <td>nam</td> <td>161 Yngoong</td> <td>1</td> <td>1</td> <td>ko</td> </tr> </tbody> <tfoot> <tr> <th>Mã khách hàng</th> <th>Tên khách hàng</th> <th>Email</th> <th>SĐT</th> <th>Giới tính</th> <th>Địa chỉ</th> <th>Mã TKNV</th> <th>Mã Nhóm KH</th> <th>Ghi chú</th> </tr> </tfoot> </table> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <div class="clearfix"></div> <ul class="pagination pull-right"> <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li> </ul> </div> </div> </div> </div>

h3{ margin:30px; } .col-md-3{ margin-left:920px; } .ex1{ margin-left:20px; background-color: coral; }

$(document).ready(function() { $('#example').DataTable(); } );