表格

<table class="table table-striped">
    <thead><td>#</td><td>图书名</td><td>出版社</td><td>作译者</td></thead>
    <tbody>
    <tr><td>1</td><td>AAAAAA</td><td>AAAAAA</td><td>AAAAAA</td></tr>
    <tr><td>2</td><td>BBBBB</td><td>BBBBB</td><td>BBBBB</td></tr>
    <tr><td>3</td><td>CCCCC</td><td>CCCCC</td><td>CCCCC</td></tr>
    <tr><td>4</td><td>DDDDD</td><td>DDDDD</td><td>DDDDD</td></tr>
    <tr><td>5</td><td>EEEEEEEE</td><td>EEEEEEEE</td><td>EEEEEEEE</td></tr>
    </tbody>
</table>

 

1.基础样式

　　只要在table元素上应用.table样式即可制作出比较漂亮的表格，table样式的主要作用有3个：真加单元格的内部边距、在thead的底部设置一条2像素的粗线，以及在每行记录的顶部都有一条1个像素的细线。主要源码如下：

// 源码1401行
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个像素宽的横线 */
}

 2.带条纹的表格

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

　　各行换色的实现方式是利用了CSS3里的nth-child选择器来实现的，所以不支持IE8及以下版本。

// 源码1464行
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
                        /* 如果需要更换颜色,需要重载覆盖才行(详情阅读第2章的2.3节组件架构) */
}

3.带边框的表格

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

// 源码1449行
.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;             /* 表头底部边框 */
}

4.鼠标悬停高亮

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

// 源码1468行
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
}

5.紧凑型表格

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

// 源码1441行
.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;
}

　　以上4种特效样式可以混合在一起使用，从而制作出复杂而精美的表格。

6.行级元素样式

　　Bootstrap为表格的tr提供了5中额外的样式，用于控制tr的背景色。

    <tr class="active"><td>1</td><td>AAAAAA</td><td>AAAAAA</td><td>AAAAAA</td></tr>
    <tr class="warning"><td>2</td><td>BBBBB</td><td>BBBBB</td><td>BBBBB</td></tr>
    <tr class="danger"><td>3</td><td>CCCCC</td><td>CCCCC</td><td>CCCCC</td></tr>
    <tr class="success"><td>4</td><td>DDDDD</td><td>DDDDD</td><td>DDDDD</td></tr>
    <tr class="info"><td>5</td><td>EEEEEEEE</td><td>EEEEEEEE</td><td>EEEEEEEE</td></tr>

7.响应式表格

　　Bootstrap为表格提供了一个响应式设计的容器(.table-responsive样式)，将.table-responsive样式包装在.table样式外部即可创建响应式表格，其会在小屏幕设备上(小于768像素)水平滚动。而当屏幕大于768像素宽度时，水平滚动条消失。

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