bootstarp--Global CSS style table

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.