Create table instances using Boostrap

Previous words

Bootstrap provides us with very beautiful and easy-to-use table styles. You can use Boosttrap to quickly create tables of different styles. This article will introduce Boosttrap tables in detail

Basic example

Boosttrap resets the style of the table <table> as follows

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}

<table>
  <caption>Optional table caption.</caption>
  <thead><tr>  <th>#</th>  <th>First Name</th>  <th>Last Name</th>  <th>Username</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>

Add the .table class to any <table> tag to give it a basic style—a small amount of padding and a horizontal divider

<table class="table">
  ...</table>

Striped table

Through the .table-striped class you can give Add a zebra stripe style to each row within <tbody> [Note] The striped table is implemented by relying on the

:nth-child

CSS selector, and This feature is not supported by IE8- ## Add the .table-bordered class to add borders to the table and each cell in it

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

Mouse hover

By adding the .table-hover class, each row in <tbody> can respond to the mouse hover state

<table class="table table-striped">
  ...</table>

<table class="table table-bordered">
  ...</table>

Condensed table

By adding the .table-condensed class, the table can be made more compact and the padding in the cells ) will be halved

<table class="table table-hover">
  ...</table>

State Class

Through these status classes, rows or units can be Grid setting color

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

<table class="table table-condensed">
  ...</table>

##Responsive form

Change any. The table element is wrapped in a .table-responsive element to create a responsive table that will scroll horizontally on small screen devices (less than 768px). When the screen is larger than 768px width, the horizontal scroll bar disappears

Class    　　描述
.active     鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info    　　标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger     标识危险或潜在的带来负面影响的动作

The above is the detailed content of Create table instances using Boostrap. For more information, please follow other related articles on the PHP Chinese website!