Talk about Bootstrap table styles

Bootstrap provides a clean layout for creating tables. The following table lists some table elements supported by Bootstrap:

Label	describe
<table>	Add basic styles to the table.
<thead>	Container element for the table header row.
<tbody>	Container element for table rows in the table body.
<tr>	<td>A set of container elements ( or <th>) for table cells that appear on a single row .
<td>	Default table cell.
<th>	A special table cell that must be used <thead>within .
<caption>	Table title.

1 table class

The following table styles can be used in tables:

kind	describe
.table	<table>Add basic styles to any (horizontal dividers only)
.table-striped	Add stripes in the form of zebras <tbody>inside (not supported in IE8)
.table-bordered	Add borders to all table cells
.table-hover	<tbody>Enable mouseover state for any row within
.table-condensed	Make the table more compact

The table-hover, which has a light gray background when the pointer hovers over the row.

1.1 Basic style (only horizontal dividers)

A basic table with only padding and horizontal splits.

<div class="container">
    <h2>基本样式 (只有横向分隔线)</h2>
    <table class="table">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>deniro</td>
            <td>男</td>
        </tr>
        <tr>
            <td>lily</td>
            <td>女</td>
        </tr>
        </tbody>
    </table>
</div>

Effect:

1.2 Zebra stripes

1.3 Border

There is a border around each element:

1.4 Compact

The padding is cut in half to make the table look more compact, which is useful when you want to make information look more compact.

2 <tr>, <th>and <td>class

The following classes are available for rows or cells of a table:

kind	describe
.active	Apply hover color to row or cell
.success	indicate success
.info	show information
.warning	express a warning
.danger	express danger

With them, we can change the background color of table rows or individual cells.

2.1 success effect

2.2 info effect

2.3 warning effect

2.4 warning effect

3 Responsive forms

By wrapping any .table in the .table-responsive class, the table can be scrolled horizontally to accommodate small devices (less than 768px). You won't see any difference when viewing on larger devices than 768px wide.

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
     ...
      </table>
</div>