您的位置：首页 > Web前端 > BootStrap

bootstrap table 表格学习笔记

2016-09-07 17:57 197 查看

文章参考 http://caibaojian.com/bootstrap/base-css.html#tables

为 <table> 标签增加基本样式--很少的内补(padding)并只增加水平分隔线--只要为其增加 .table 类即可。

<table class="table table-hover table-bordered">

<thead  style="background-color: #d9edf7;">
<td >
商品名称
</td>
<td >
供应商
</td>
<td >
商品ID
</td>
<td >
购买数量
</td>
<td >
购买单价
</td>
<td >
商品总价
</td>
</thead>

<tr>
<td >
苹果
</td>
<td >
供应商A
</td>
<td >
007
</td>
<td >
2
</td>
<td >
50
</td>
<td >
100
</td>
</tr>

<tr>
<td >
梨子
</td>
<td >
供应商B
</td>
<td >
0072
</td>
<td >
2
</td>
<td >
100
</td>
<td >
200
</td>
</tr>

<tr>
<td class=" text-center" colspan="3">
商品合计
</td>
<td >
4
</td>
<td >
100
</td>
<td >
300
</td>
</tr>
</table>

自定义不显示任何边线：添加样式noborder

.table > tbody > tr > td.noborder, .table > tbody > tr > th.noborder, .table > tfoot > tr > td.noborder, .table > tfoot > tr > th.noborder, .table > thead > tr > td.noborder, .table > thead.noborder > tr > th{
border:none;
}

斑马线效果：添加table-striped

<table class="table table-striped">
…
</table>

悬浮样式：添加table-hover

<table class="table table-hover">
…
</table>

添加边框：table-bordered

<table class="table table-bordered">
…
</table>

内容更紧凑：.table-condensed

每个单元格的内补(padding)减半可使表格更紧凑。

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

可选的行属性：给行添加背景色

.success	表示成功或积极的行为。
.error	表示一个危险或存有潜在危险的行为。
.warning	表示警告，可能需要注意。
.info	作为一个默认样式的一个替代样式。

1	TB - Monthly	01/04/2012	Approved
2	TB - Monthly	02/04/2012	Declined
3	TB - Monthly	03/04/2012	Pending
4	TB - Monthly	04/04/2012	Call in to confirm

<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>

<table>	包裹以表格形式展示数据的元素
<thead>	包含表头( <tr> ) 的容器
<tbody>	包含表格内容( <tr> )的容器
<tr>	单元格 ( <td> 或 <th> ) 容器
<td>	默认的单元格
<th>	每列(或行，依赖于放置的位置)所对应的的label
<caption>	用于对表的描述或总结，对屏幕阅读器特别有用

<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航