Bootstrap table and bootstrap Table Style

Bootstrap table and bootstrap Table Style
Previous

Bootstrap provides us with a very nice and easy-to-use table style. With bookers, we can quickly create tables of different styles. This article will introduce the bootup table in detail.

 

Basic instance

Boostrap resets the <table> style of the 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>    

Any<table>Add tags.tableClass can give it a basic style-a small number of padding and horizontal line separation

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

 

Striped table

Pass.table-stripedClass<tbody>Add a zebra striped pattern to each line

[Note] the striped table is dependent.:nth-childCSS selector implementation, and this function is not supported by IE8

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

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

 

Border table

Add.table-borderedClass adds a border for the table and each cell in it

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

 

Hover

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

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

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

 

Compress table

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

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

 

Status

You can use these status classes to set colors for rows or cells.

Class description. the color that is set when the active mouse is hovering over a row or cell. success identifies successful or positive actions. info identifies common prompts or actions. warning of the warning identifier or user attention is required. danger identifies dangerous or potentially negative actions

<table class="table">  <thead>    <tr>      <th>#</th>      <th>Column heading</th>      <th>Column heading</th>      <th>Column heading</th>    </tr>  </thead>  <tbody>    <tr class="active">      <th scope="row">1</th>      <td>Column content</td>      <td>Column content</td>      <td>Column content</td>    </tr>    <tr class="success">      <th scope="row">2</th>      <td>Column content</td>      <td>Column content</td>      <td>Column content</td>    </tr>    <tr class="info">      <th scope="row">3</th>      <td>Column content</td>      <td>Column content</td>      <td>Column content</td>    </tr>    <tr class="warning">      <th scope="row">4</th>      <td>Column content</td>      <td>Column content</td>      <td>Column content</td>    </tr>    <tr class="danger">      <th scope="row">5</th>      <td>Column content</td>      <td>Column content</td>      <td>Column content</td>    </tr>    <tr>      <th scope="row">6</th>      <td>Column content</td>      <td>Column content</td>      <td>Column content</td>    </tr>  </tbody></table>

 

Response Table

Wrap any. table element in the. table-responsive element to create a responsive 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 class="table-responsive">  <table class="table">    <thead>      <tr>        <th>#</th>        <th>Table heading</th>        <th>Table heading</th>        <th>Table heading</th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">1</th>        <td>Table cell</td>        <td>Table cell</td>        <td>Table cell</td>      </tr>      <tr>        <th scope="row">2</th>        <td>Table cell</td>        <td>Table cell</td>        <td>Table cell</td>      </tr>      <tr>        <th scope="row">3</th>        <td>Table cell</td>        <td>Table cell</td>        <td>Table cell</td>      </tr>    </tbody>  </table></div>