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> < ;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