CSS Demo
CSS Code
Output
<!DOCTYPE html> <html> <head> <title>Bootstrap basic table example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container "> <h1>A Bootstrap table</h1> <table class="table table-bordered table-striped table-hover"> <tr class="danger"> <th>Product ID</th> <th>Product Name</th> <th>Product Quality</th> <th>Product Quantity</th> </tr> <tr class="info"> <td>1</td> <td>Wheat</td> <td>Good</td> <td>200 Bags</td> </tr> <tr class="warning"> <td>2</td> <td>Rice</td> <td>Good</td> <td>250 Bags</td> <tr class="info"> <td>3</td> <td>Sugar</td> <td>Good</td> <td>200 Bags</td> </tr> <tr class="warning"> <td>3</td> <td>Sugar</td> <td>Good</td> <td>200 Bags</td> </tr> <tr class="info"> <td>3</td> <td>Sugar</td> <td>Good</td> <td>200 Bags</td> </tr> </table> </div><br /><br /> </body> </html>
A Bootstrap table
Product ID
Product Name
Product Quality
Product Quantity
1
Wheat
Good
200 Bags
2
Rice
Good
250 Bags
3
Sugar
Good
200 Bags
3
Sugar
Good
200 Bags
3
Sugar
Good
200 Bags