bootstrap——css样式（三、表格）

1、.table
为任意 table 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

"table">
  ...

2、条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。

"table table-striped">
  ...

3、带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

"table table-bordered">
  ...

4、鼠标悬停
通过添加 .table-hover 类可以让 tbody 中的每一行对鼠标悬停状态作出响应。
就是当鼠标悬停时，这一行变成灰色

"table table-hover">
  ...

5、紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

"table table-condensed">
  ...

6、状态类
通过这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

"active">...
"success">...
"warning">...
"danger">...
"info">...



  "active">...
  "success">...
  "warning">...
  "danger">...
  "info">...

7、响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

"table-responsive">
  "table">
    ...

Firefox 和 fieldset 元素
Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码，否则无解：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}