bootstrap table 表格学习笔记

文章参考 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>

 

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

Class Description

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

 

# Product Payment Taken Status

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>