"test 1"
Bootstrap 4.1.1 Snippet by cchirino

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="fr"> <head> <title>Essai</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" media="screen"> </head> <body> <b>Table 1</b><br> <div style='width: 800px;'> <table id="TABLE_1" class="display row-border hover compact" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>$320,800</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>$433,060</td> </tr> </tbody> </table> </div> <b>Table 2</b><br> <div style='width: 800px;'> <table id="TABLE_2" class="display row-border hover compact" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>$90,560</td> </tr> <tr> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td>London</td> <td>43</td> <td>$313,500</td> </tr> </tbody> </table> </div> <b>Table 3</b><br> <div style='width: 800px;'> <table id='TABLE_3' class='display row-border hover compact' cellspacing='0' width='100%'> <thead> <tr> <th>Date</th> <th>Ordre</th> <th>Qté</th> <th colspan='2'>Montant</th> <th>Frais</th> </tr> </thead> <tbody> <tr> <td>2017-04-29 23:11:25</td> <td><span style='color: green;'>buy</span></td> <td>0.41045890</td> <td>0.02996349</td> <td> </td> <td>0.0015 %</td> </tr> <tr> <td>2017-04-29 20:37:21</td> <td><span style='color: red;'>sell</span></td> <td>0.41712695</td> <td> </td> <td>0.03084031</td> <td>0.0025 %</td> </tr> </tbody> </table> </div> <b>Table 4</b><br> <div style='width: 800px;'> <table id='TABLE_4' class='display row-border hover compact' cellspacing='0' width='100%'> <thead> <tr> <th>Date</th> <th>Ordre</th> <th>Qté</th> <th colspan='2'>Montant</th> <th>Frais</th> </tr> </thead> <tbody> <tr> <td>2017-04-29 23:11:25</td> <td><span style='color: green;'>buy</span></td> <td>0.41045890</td> <td>0.02996349</td> <td> </td> <td>0.0015 %</td> </tr> <tr> <td>2017-04-29 20:37:21</td> <td><span style='color: red;'>sell</span></td> <td>0.41712695</td> <td> </td> <td>0.03084031</td> <td>0.0025 %</td> </tr> </tbody> </table> </div> </body> </html>
$(document).ready(function() { $("table[id^='TABLE']").DataTable( { "scrollY": "200px", "scrollCollapse": true, "searching": true, "paging": true } ); } );

Related: See More

Light Bootstrap Dashboard React

Questions / Comments: