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像素*/}