Bootstrap table:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body> <p class="btn-primary">.table, .table-striped, .table-hover, .table-condensed, .table-bordered, .table-responsive </p> <table class="table"> <tbody> <thead> <th>this is just table class</th> </thead> <tr> <td>this is row1, col1</td> </tr> <tr> <td>row2, col1</td> </tr> <tr> <td>row3, col1</td> </tr> </tbody> </table> <table class="table table-striped"> <tbody> <thead> <th>this is table and table-striped class</th> </thead> <tr> <td>this is row1, col1</td> </tr> <tr> <td>row2, col1</td> </tr> <tr> <td>row3, col1</td> </tr> </tbody> </table> <table class="table table-bordered"> <tbody> <thead> <th>this is table table-bordered class</th> </thead> <tr> <td>this is row1, col1</td> </tr> <tr> <td>row2, col1</td> </tr> <tr> <td>row3, col1</td> </tr> </tbody> </table> <table class="table table-condensed"> <tbody> <thead> <th>this is table table-condensed class</th> </thead> <tr> <td>this is row1, col1</td> </tr> <tr> <td>row2, col1</td> </tr> <tr> <td>row3, col1</td> </tr> </tbody> </table> <table class="table table-hover"> <tbody> <thead> <th>this is table table-hover class</th> </thead> <tr> <td>this is row1, col1</td> </tr> <tr> <td>row2, col1</td> </tr> <tr> <td>row3, col1</td> </tr> </tbody> </table> <div class="table-responsive"> <table class="table"> <tbody> <thead> <th>this is table-responsive class</th> </thead> <tr> <td>this is row1, col1, and this is a long long long long long long long long long long row</td> </tr> <tr> <td>row2, col1</td> </tr> <tr> <td>row3, col1</td> </tr> </tbody> </table> </div> <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script> <script type="text/javascript" src="dist/js/bootstrap.js"></script> </body> </html>