Bootstrap 表格

Bootstrap表格一个基础样式：.table（必须），四种附加样式（可选）：.table-striped、.table-bordered、.table-hover、.table-condensed，一个响应式布局容器类：.table-responsive。

一、基础样式：

<table class="table">
	<thead><tr><th>col1</th><th>col2</th><th>col2</th></tr></thead>
	<tbody>
		<tr><td>row1#col1</td><td>row1#col2</td><td>row1#col3</td></tr>
		<tr><td>row2#col1</td><td>row2#col2</td><td>row2#col3</td></tr>
		<tr><td>ro31#col1</td><td>row3#col2</td><td>row3#col3</td></tr>
	</tbody>
	<tfoot><tr><th>foot#col1</th><th>foot#col2</th><th>foot#col2</th></tr></tfoot>
</table>

结果：

.table 的css源码：

table { max-width: 100%; background-color: transparent;}
th { text-align: left;}
.table { width: 100%; margin-bottom: 20px;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px; /*设置单元格的内边距*/
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd; /* 每行记录的顶部都有1条1个像素宽的横线 */
} .
table >
thead >
tr >
th {
vertical-align: bottom;
border-bottom: 2px solid #ddd; /* thead有1条2个像素宽的横线 */
}
/*省略部分样式*/
.table > tbody + tbody {
border-top: 2px solid #ddd;
/* 如果表格里有2个tbody,两者之间也会有1条2个
像素宽的横线 */
}

二、带背景条纹的表格，给<table>加一个table-striped类即可：

<table class="table table-striped">
	<thead><tr><th>col1</th><th>col2</th><th>col2</th></tr></thead>
	<tbody>
		<tr><td>row1#col1</td><td>row1#col2</td><td>row1#col3</td></tr>
		<tr><td>row2#col1</td><td>row2#col2</td><td>row2#col3</td></tr>
		<tr><td>ro31#col1</td><td>row3#col2</td><td>row3#col3</td></tr>
	</tbody>
	<tfoot><tr><th>foot#col1</th><th>foot#col2</th><th>foot#col2</th></tr></tfoot>
</table>

结果：

css源码：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

三、带边框的表格

给<table>加一个“table-bordered”的类即可，在这个特性下，bootstrap为表格所有的单元格提供一条1px宽的边框。

<table class="table table-borded">
	<thead><tr><th>col1</th><th>col2</th><th>col2</th></tr></thead>
	<tbody>
		<tr><td>row1#col1</td><td>row1#col2</td><td>row1#col3</td></tr>
		<tr><td>row2#col1</td><td>row2#col2</td><td>row2#col3</td></tr>
		<tr><td>ro31#col1</td><td>row3#col2</td><td>row3#col3</td></tr>
	</tbody>
	<tfoot><tr><th>foot#col1</th><th>foot#col2</th><th>foot#col2</th></tr></tfoot>
</table>

结果：

css源码：

.table-bordered {
border: 1px solid #dddddd; /* 整体表格边框 */
} .
table-bordered >
thead >
tr >
th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #dddddd; /* 单元格边框 */
} .
table-bordered >
thead >
tr >
th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px; /* 表头底部边框 */
}

四、鼠标悬停高亮的表格

<table class="table table-hover">......</table>   ，由于有鼠标交互，所以图片实例从略，相应的CSS源码为：

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

五、紧凑型表格

就是表格的显示比普通表格稍微紧凑一下，<table class="table table-condensed">...</table> 实例图片：

相应css源码：

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;         /*默认时，表格的padding是8px */
}

六、行级元素样式，为<tr>添加5种额外的class（active、info、succes、danger、warning）可用于控制 tr 的背景色，示例代码：

<table class="table table-condensed">
		<thead><tr><th>col1</th><th>col2</th><th>col2</th></tr></thead>
		<tbody>
			<tr class="success"><td>row1#col1</td><td>row1#col2</td><td>row1#col3</td></tr>
			<tr class="warning"><td>row2#col1</td><td>row2#col2</td><td>row2#col3</td></tr>
			<tr class="danger"><td>ro31#col1</td><td>row3#col2</td><td>row3#col3</td></tr>
		</tbody>
		<tfoot><tr><th>foot#col1</th><th>foot#col2</th><th>foot#col2</th></tr></tfoot>
	</table>

运行结果：

相应的css源码：

.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table >
tfoot > tr > td.danger,
/* 此处省略了一些选择符*/
.table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table >
tfoot > tr.danger > td {
background-color: #f2dede; /* danger样式的tr背景色*/
} .
table-hover >
tbody >
tr >
td.danger:hover,
/* 此处省略了一些选择符*/
.table-hover > tbody > tr.danger:hover > td {
background-color: #ebcccc; /* table-hover和danger一起使用时,鼠标悬停时的
tr背景色*/
}

七、响应式表格

将.table-responsive样式包装在.table样式外部即可创建响应式表格，其会在小屏幕设备上（小于768像素）水平滚动。而当屏幕大于768像素时，水平滚动消失，示例：

<div class=“table-responsive”>
<table class=“table”>
…
</table>
</div>

相应的css源码：

.table-responsive > .table-bordered {
border: 0; /*将整个表格的外边框设置为0像素*/
}
.table-responsive > .table-bordered > tbody > tr > th:first-child,
/*此处省略一些选择符*/
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0; /*将所有tr的第一个单元格(即最左边的一列)的左边框都置为0像素
*/
}
.table-responsive > .table-bordered > tbody > tr > th:last-child,
/*此处省略一些选择符*/
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0; /*将所有tr的最后一个单元格(即最右边的一列)的右边框都设置为0
像素*/
}
.table-responsive > .table-bordered > tbody > tr:last-child > th,
/*此处省略一些选择符*/
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0; /*将最后一行tr里的单元格的底部边框设置为0像素*/
}