Example: bootstrap 3 table
Bootstrap Basic Table A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table ------------------------------------------------------------ Striped Rows The .table-striped class adds zebra-stripes to a table Bordered Table The .table-bordered class adds borders on all sides of the table and cells ------------------------------------------------------------ Hover Rows The .table-hover class adds a hover effect (grey background color) on table rows ------------------------------------------------------------ Condensed Table The .table-condensed class makes a table more compact by cutting cell padding in half ------------------------------------------------------------ Contextual Classes Contextual classes can be used to color table rows (<tr>) or table cells (<td>) The contextual classes that can be used are: Class Description .active Applies the hover color to the table row or table cell .success Indicates a successful or positive action .info Indicates a neutral informative change or action .warning Indicates a warning that might need attention .danger Indicates a dangerous or potentially negative action ------------------------------------------------------------ Responsive Tables The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference Sample code <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap Table Example</h2> <table class="table -----------"> // try by adding different table class at this place => ("-----------") <thead> <tr> <th>Id</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ram</td> <td>10</td> </tr> <tr> <td>2</td> <td>Shyam</td> <td>12</td> </tr> <tr> <td>3</td> <td>Ramesh</td> <td>13</td> </tr> <tr> <td>4</td> <td>Suresh</td> <td>11</td> </tr> </tbody> </table> </div> </body> </html>
Comments
Post a Comment