Bootstrap provides a clear layout for creating tables. The following table lists some table elements supported by Bootstrap:
Table category
The following table styles can be used in tables:
<tr>, <th> and <td> classes
The following table classes can be used for rows or cells of a table:
Basic tables
If you want a basic table with only padding and horizontal splitting, add class .table as shown in the following example:
<div> <table> <caption>Basic table layout</caption> <thead> <tr> <th>Number</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>No.1</td> <td>Beijing</td> </tr> <tr> <td>No.2</td> <td>Shanghai</td> </tr> </tbody> </table></div>
Display effect:
Optional table class
In addition to basic table tags and .table classes, there are some classes that can be used to define styles for tags. These classes will be introduced to you below.
Stripe table
By adding the .table-striped class, you will see the stripes on the lines inside <tbody> as shown in the following example:
<div> <table> <caption>Stripe table layout</caption> <thead> <tr> <th>Number</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>No.1</td> <td>Beijing</td> </tr> <tr> <td>No.2</td> <td>Shanghai</td> </tr> <tr> <td>No.3</td> <td>Suzhou</td> </tr> <tr> <td>No.4</td> <td>Nanjing</td> </tr> </tbody> </table> </div>
Display effect:
Border table
By adding the .table-bordered class, you will see that each element has borders around it and the entire table is rounded, as shown in the following example:
<div> <table> <caption>Border table layout</caption> <thead> <tr> <th>Number</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>No.1</td> <td>Beijing</td> </tr> <tr> <td>No.2</td> <td>Shanghai</td> </tr> <tr> <td>No.3</td> <td>Suzhou</td> </tr> <tr> <td>No.4</td> <td>Nanjing</td> </tr> </tbody> </table> </div>
Display effect:
Hover table
By adding the .table-hover class, a light gray background appears when the pointer hovers over the line, as shown in the following example:
<div> <table> <caption>Hoom table layout</caption> <thead> <tr> <th>Number</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>No.1</td> <td>Beijing</td> </tr> <tr> <td>No.2</td> <td>Shanghai</td> </tr> <tr> <td>No.3</td> <td>Suzhou</td> </tr> <tr> <td>No.4</td> <td>Nanjing</td> </tr> </tbody> </table></div>
Display effect:
Simplified form
By adding .table-condensed class, padding is cut in half to make the table look more compact, as shown in the example below. This is very useful when trying to make the information look more compact.
<div> <table> <caption>Simplified table layout</caption> <thead> <tr> <th>Number</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>No.1</td> <td>Beijing</td> </tr> <tr> <td>No.2</td> <td>Shanghai</td> </tr> <tr> <td>No.3</td> <td>Suzhou</td> </tr> <tr> <td>No.4</td> <td>Nanjing</td> </tr> </tbody> </table></div>
Display effect:
Context Class
The context classes listed in the following table allow you to change the background color of a table row or a single cell.
These classes can be used in <tr>, <td>, and <th>, as shown in the following example:
<div> <table> <caption>Context table layout</caption> <thead> <tr> <th>Number</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>No.1</td> <td>Beijing</td> </tr> <tr> <td>No.2</td> <td>Shanghai</td> </tr> <tr> <td>No.3</td> <td>Suzhou</td> </tr> <tr> <td>No.4</td> <td>Nanjing</td> </tr> </tbody> </table> </div>
Display effect:
Responsive table
By wrapping any .table in the .table-responsive class, you can have the table scroll horizontally to suit small devices (less than 768px). When viewing on large devices larger than 768px wide, you won't see any difference.
<div> <table> <caption>Responsive table layout</caption> <thead> <tr> <th>Number</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>No.1</td> <td>Beijing</td> </tr> <tr> <td>No.2</td> <td>Shanghai</td> </tr> <tr> <td>No.3</td> <td>Suzhou</td> </tr> <tr> <td>No.4</td> <td>Nanjing</td> </tr> </tbody> </table> </div>
Display effect:
If you want to continue learning, you can click here to study and then attach a wonderful topic to you: Bootstrap learning tutorial
The above is all about this article. I hope it can help you better learn the JS table component artifact bootstrap table.