表格 - HennesProject

表格

表格类的说明，通过给 `<table>` 添加以下类或组合，会有不同的展现效果
类	说明
.table	为任意 `<table>` 添加基本样式 (只有横向分隔线)
.table-striped	在 `<tbody>` 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 `<tbody>` 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑（即将内边距padding改小）

紧凑表格

如果想将 `<table>` 中的行和列的间距变小，可以给它添加类 `table-condensed`，效果如下：
ID	姓名	外号	手机	QQ	联系地址
1001	黄药师	东邪	13658964785	588588	浙江省舟山桃花岛
1002	欧阳锋	西毒	13796964355	577577	昆仑山东麓白驼山

紧凑表格代码

                    
                        <table class="table table-condensed">
...
</table>

状态类

通过这些状态类可以为 <table> 中的行或单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动（即有水平滚动条）；当屏幕大于 768px 宽度时，水平滚动条消失。

ID	姓名	外号	手机	QQ	联系地址
1001	黄药师	东邪	13658964785	588588	浙江省舟山桃花岛
1002	欧阳锋	西毒	13796964355	577577	昆仑山东麓白驼山
1003	段智兴	南帝	13786964688	566566	云南大理
1004	洪七公	北丐	13476964677	544544	居无定所
1005	王重阳	中神通	13876884656	555555	陕西省终南山

响应式表格代码

                    
                        <div class="table-responsive">
<table class="table">
...
</table>
</div>