Bootstrap表格

1.表格的元素

<thead> 表格标题行<tbody> 表格主体<tr>行<td> 表格的列<th> 特殊的表格单元格，必须在<thead>内使用<caption> 表格存储内容的描述或总结

2.表格类

.table 为任意表格添加基本样式，只有横向分割线.table-striped 在<tbody>内添加斑马线形式的条纹.table-bordered 为所有表格的单元格添加边框.table-hover 在<tbody>内的任意一行启用鼠标悬停状态.table-condensed 让表格更加紧凑

1. <tr>,<th>和<td>类

.active 将悬停的颜色应用在行或单元格上.success 成功的操作.info 信息变化的操作.warning 表示一个警告的操作.danger 表示一个危险的操作

4.上下文类

.active 对某一特定的行或单元格应用悬停颜色.success 表示一个成功的或积极的动作.warning 表示一个需要注意的警告.danger 表示一个危险的或潜在的负面动作

5.响应式表格

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

6.例子

//基本表格，只有横线隔开隔行<table class="table">   <caption>基本的表格布局</caption>   <thead>      <tr>         <th>名称</th>         <th>城市</th>      </tr>   </thead>   <tbody>      <tr>         <td>lwg</td>         <td>北京</td>      </tr>         </tbody></table>

//条纹表格<table class="table table-striped">。。。。</table>

//边框表格<table class="table table-bordered">。。。</table>

//悬停表格<table class="table table-hover">。。。</table>

//精简表格<table class="table table-condensed">。。。</table>

//上下文类  <tr class="active">      <td>lwg</td>      <td>2016</td>      <td>BJ</td>   </tr>

//响应式表格<div class="table-responsive">   <table class="table">   。。。。   </table> </div>