div table bootstrap 4
<table class="table table-striped table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
responsive table bootstrap 4
<div class="table-responsive-sm"> <table class="table"> ... </table> </div>
table in bootstrap 4
<table class="table table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
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>
bootstrap change color table striped
/* Add the following CSS style after loading Bootstrap to change the color of table-striped: */ .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: red; /* Choose your own color here */ }
bootstrap table
<table class="table table-hover table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
