Article 6 Bootstrap table style introduction and Article 6 bootstrap table
Basic table:
<Table> <tr> <td> User Name </td> <td> password </td> </tr> <td> aha </td> <td> 1111 </td> </tr> </table>
In<table>
Add tags.table
Class can give it a basic style, a small number of inner padding and horizontal separation lines.
The display effect is as follows:
Striped table:
Adding "class =" table-striped "to the table label adds a zebra stripe pattern to each row in the tbody.
<Table> <tr> <td> User Name </td> <td> password </td> </tr> <td> aha </td> <td> 1111 </td> </tr> </table>
The display effect is as follows:
Table with border:
Adding class = "table-bordered" to the table label adds a border for each cell in the table.
<Table> <tr> <td> User Name </td> <td> password </td> </tr> <td> aha </td> <td> 1111 </td> </tr> </table>
The display effect is as follows:
Tightening table:
Add.table-condensed
Class makes the table more compact, and the padding in the cell will be halved.
<Table> <tr> <td> User Name </td> <td> password </td> </tr> <td> aha </td> <td> 1111 </td> </tr> </table>
The display effect is as follows:
Response Table:
Convert any.table
Element wrapped in.table-responsive
Element to create a response table that will scroll horizontally on a small screen device (less than 768px. When the screen width is greater than PX, the horizontal scroll bar disappears
<Div> <table> <tr> <td> User Name </td> <td> password </td> </tr> <td> aha </td> <td> 1111 </td> </tr> </table> </div>
The above is a full description of the sixth Bootstrap table style introduction provided by Alibaba Cloud. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!