2019-04-09 表格（4）

1.基本表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table

<table class="table"> 

 <caption>基本的表格布局</caption> 

 <thead> 

 <tr> <th>名称</th> 

 <th>城市</th> </tr> 

 </thead> 

 <tbody> 

 <tr>  <td>Tanmay</td>

 <td>Bangalore</td>  </tr> 

 <tr> <td>Sachin</td>

 <td>Mumbai</td></tr> 

 </tbody>

</table>

2.条纹表格

通过添加 .table-striped class，您将在 内的行上看到条纹

<table class="table table-striped"> 

 <caption>条纹表格布局</caption> 

 <thead> 

 <tr> <th>名称</th> <th>城市</th> <th>邮编</th> </tr> 

 </thead> 

 <tbody> 

 <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td>  </tr>

 <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr>

 <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> 

 </tbody>

</table>

3.边框表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的

<table class="table table-bordered"> 

 <caption>边框表格布局</caption> 

 <thead>

 <tr> <th>名称</th> <th>城市</th> <th>邮编</th> </tr>

 </thead> 

 <tbody>

 <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr>

 <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> 

 <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr>

 </tbody>

</table>

4.悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景

<table class="table table-hover"> 

 <caption>悬停表格布局</caption> 

 <thead> <tr> <th>名称</th> <th>城市</th> <th>邮编</th> </tr> </thead> 

 <tbody> 

 <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr>

 <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr>

 <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr>

 </tbody>

</table>

5.精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑

<table class="table table-condensed"> 

 <caption>精简表格布局</caption> 

 <thead> <tr> <th>名称</th> <th>城市</th> <th>邮编</th></tr> </thead>

 <tbody> 

 <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td></tr>

 <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td></tr>

 <tr> <td>Uma</td> <td>Pune</td> <td>411027</td></tr> 

 </tbody>

</table>

6.上下文类

表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色

<table class="table"> 

 <caption>上下文表格布局</caption>

 <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th></tr> </thead>

 <tbody>

 <tr class="active"> <td>产品1</td> <td>23/11/2013</td> <td>待发货</td></tr>

 <tr class="success"> <td>产品2</td> <td>10/11/2013</td> <td>发货中</td></tr>

 <tr class="warning"> <td>产品3</td> <td>20/10/2013</td> <td>待确认</td></tr> 

 <tr class="danger"> <td>产品4</td> <td>20/10/2013</td> <td>已退货</td></tr> 

 </tbody>

</table>

7.响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<div class="table-responsive"> 

 <table class="table"> 

 <caption>响应式表格布局</caption> 

 <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th></tr> </thead> 

 <tbody>

 <tr> <td>产品1</td> <td>23/11/2013</td> <td>待发货</td></tr>

 <tr> <td>产品2</td> <td>10/11/2013</td> <td>发货中</td></tr> 

 <tr> <td>产品3</td> <td>20/10/2013</td> <td>待确认</td></tr> 

 <tr> <td>产品4</td> <td>20/10/2013</td> <td>已退货</td></tr> 

 </tbody> 

 </table>

</div>