
Hi !
Hello friends today in this article here i am going to provides you the best Responsive bootstrap datatable examples. Here i will provides complete source code of bootstrap responsive datatable.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css" /> <style type="text/css"> .grid tr:nth-child(even) { background: #fff } .grid tr:nth-child(odd) { background: #f9fafa } .grid td { border: 1px solid #e4e4e4; color: #000; font-size: 13px; height:10px; } .grid th { background: #fff; text-align: center; color: #000; height:10px; font-size: 13px; font-weight: 600; border: 1px solid #e4e4e4; } .gv { overflow-x: scroll; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="gv"> <table id="example" class="table table-striped table-bordered grid" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Jennifer Chang</td> <td>Regional Director</td> <td>Singapore</td> <td>28</td> <td>2010/11/14</td> <td>$357,650</td> </tr> <tr> <td>Brenden Wagner</td> <td>Software Engineer</td> <td>San Francisco</td> <td>28</td> <td>2011/06/07</td> <td>$206,850</td> </tr> <tr> <td>Fiona Green</td> <td>Chief Operating Officer (COO)</td> <td>San Francisco</td> <td>48</td> <td>2010/03/11</td> <td>$850,000</td> </tr> <tr> <td>Shou Itou</td> <td>Regional Marketing</td> <td>Tokyo</td> <td>20</td> <td>2011/08/14</td> <td>$163,000</td> </tr> <tr> <td>Michelle House</td> <td>Integration Specialist</td> <td>Sydney</td> <td>37</td> <td>2011/06/02</td> <td>$95,400</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> </div> </div> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script> <script type="text/javascript" src=" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script> <script> $(document).ready(function () { $('#example').DataTable(); }); </script>