bootstarp--Global CSS style table

Forms can be said to be very common in real-world development, but many people do not like to use tables, but individuals find it easy to use tables in a simple interface layout. After all, the people gave the form this element, but you do not use, seemingly a little puzzled amorous feelings.

The following is a brief introduction to the table given in bootstrap.

1, Striped table

.table-striped <tbody> The zebra stripe style can be added to each line within the class. Note that this feature is not supported for IE8.

Code:

Code<divclass="Container"> <tableclass="Table table-striped"> <thead> <tr> <th> title </th> &lt            ;th> title </th> <th> title </th> </tr> </thead> <tbody> <tr> <td> content 1</td> <td> content 2 </td> <td> content 3</td> </tr> <tr&                    Gt                                   <td> content 1</td> <td> content 2</td> <td> content 3</td>                    </tr> <tr> <td> Content 1</td> <td> content 2</td> <td> content 3</td> </tr> </tbody&        Gt </table> </div>

Results:

2, table with border

Add .table-bordered a class to add a border to the table and each cell in it.

Code:

Code  Class= "container" >        class= "table table-bordered" > .....        </table>    </div>

Effect:

3, mouse hover event

Adding .table-hover A class allows <tbody> each row in to respond to the mouse hover state.

Code:

Code  Class= "container" >        class= "table table-bordered table-hover" > ....        </table>    </div>

Effect:

4, condensed form

by adding .table-condensed classes can make tables more compact, and the inner complement (padding) in a cell is halved.

Code  Class= "table table-condensed" >  ...</table>

5, State Class

These status classes allow you to set the color for a row or cell.

Code:

Code<divclass="Container"> <tableclass="table table-bordered table-hover"> <thead> <tr> <th> title </th> </tr> </thead> <tbody> <trclass="Active"><td> content </td></tr> <trclass="Success"><td> content </td></tr> <trclass="Warning"><td> content </td></tr> <trclass="Danger"><td> content </td></tr> <trclass="Info"><td> content </td></tr> <trclass="Active"><td> content </td></tr> <trclass="Success"><td> content </td></tr> <trclass="Warning"><td> content </td></tr> <trclass="Danger"><td> content </td></tr> <trclass="Info"><td> content </td></tr> </tbody> </table> </div>

Effect

6, responsive table

Wrapping any .table element inside an .table-responsive element creates a responsive table that scrolls horizontally on a small screen device (less than 768px). The horizontal scroll bar disappears when the screen is larger than 768px width.

(1) Content truncation in vertical direction

The responsive table uses overflow-y: hidden attributes to truncate the content beyond the bottom and top of the table. In particular, drop-down menus and other third-party components can be truncated

(2) Firefox and fieldset elements

The Firefox browser has fieldset some width styles that affect the properties of the element, causing problems with the responsive table. Unless you use the hack code we provided below for Firefox, there is no solution:

Copy

@-moz-document url-prefix() {  fieldset { display: table-cell; }}

表格就到这里了，想要了解更多的实例或内容，请到官方网站查阅。文章有什么不妥之处，请指出，谢谢。

bootstarp--Global CSS style table