InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How to create striped table with Bootstrap? |
|
Answer» To CREATE a table in Bootstrap, use the .table class. However, to create a striped table, use the .table-stripped class. The striped table will have striped rows i.e. zebra striped rows. Here’s how you add a striped table: <table class="table table-striped"> … </table>The below example displays how we can create a striped table: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Striped Table</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.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Data</h2> <p>The following is the Investor's data:</p> <table class="table table-striped"> <thead> <tr> <th>Company</th> <th>Investor</th> </tr> </thead> <TBODY> <tr> <td>ABC</td> <td>PQ</td> </tr> <tr> <td>GHI</td> <td>VW</td> </tr> <tr> <td>JKL</td> <td>EF</td> </tr> <tr> <td>RST</td> <td>IJ</td> </tr> <tr> <td>MNO</td> <td>KL</td> </tr> </tbody> </table> </div> </body> </html>The above displays the below given output with striped rows (zebra striped). We have here 6 rows and 2 columns: |
|