1.基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table"><caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

2.条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

跨浏览器兼容性

条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-striped"><caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

3.带边框的表格

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

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-bordered"><caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

4.鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Hello, 汇智网!</h1>
<table class="table table-hover"><caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

5.紧缩表格

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

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Hello, 汇智网!</h1>
<table class="table table-condensed"><caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

bootstrap.min.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;
}

6.状态类

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

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

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table"><caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td>
</tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td>
</tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

向使用辅助技术的用户传达用意

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式 -- 例如应用了 .sr-only类而隐藏的文本 -- 来表达出来。

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

7.响应式表格

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

垂直方向的内容截断

响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

Firefox 和 fieldset 元素

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

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

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="table-responsive">
<h1>Hello, 汇智网!</h1>
<table class="table"><caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
<tr>
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td>
</tr>
<tr>
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td>
</tr>
<tr>
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

bootstrap注意事项（四）表格的更多相关文章

  1. Bootstrap入门（四）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  2. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  3. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  4. 用（bootstrap）Handsontable做表格，手动实现数据排序

    商品graph帐票时,用(bootstrap)Handsontable做表格,手动实现数据排序待解决的问题: 若使用控件本身的排序,必须指定colHead,colHead不能被copy,若想表头被co ...

  5. bootstrap学习笔记<四>（table表格）

    表格 bootstrap为table表格定制多个常用样式:基本样式,隔行变色样式,带边框样式,荧光棒样式,紧凑样式,响应样式. ☑  .table:基础表格 ☑  .table-striped:斑马线 ...

  6. bootstrap学习（四）表格

    基础样式: 自适应沾满浏览器 <table class="table"> <tr> <th>序号</th> <th>姓名 ...

  7. Bootstrap基础学习(一)—表格与按钮

    一.Bootstrap 概述      Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...

  8. Bootstrap知识记录：表格和按钮

    基本格式.table3.带边框的表格//给表格增加边框<table class="table table-bordered">4.悬停鼠标//让<tbody> ...

  9. bootstrap学习笔记细化(表格)

    主要属性: 全屏宽度带水平线的表格 .table 带边框的表格 .table-bordered 条纹状表格 .table-striped 悬停变色表格 .table-hover 紧凑风格表格 .tab ...

随机推荐

  1. SonarQube代码质量管理平台工具

    1.Sonar轮廓介绍 Sonar (SonarQube)是一个开源平台,用于管理源代码的质量.Sonar 不只是一个质量数据报告工具,更是代码质量管理平台.支持的语言包括:Java.PHP.C#.C ...

  2. 电子科大POJ "a^b"

    a ^ b Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) C-sources: ...

  3. [Leetcode][Python]42: Trapping Rain Water

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 42: Trapping Rain Waterhttps://oj.leetc ...

  4. MinGW安装教程

    首先说明一下 1) MinGw只是其中一种GCC编译环境的安装程序,还有像Cygwin也是差不多的; 2) 由于安装的时候有些地方忘了截图,所以图有些是借鉴别人的; 3) 还要就是安装MinGw,最好 ...

  5. STL入门

    STL入门 STL的组成 六大组件 容器container 算法algorithm 迭代器iterator 仿函数function object 适配器adaptors 空间配制器allocator ...

  6. hdu 2851（最短路）

    点击打开链接 竟然是最短路!!!! 藏的好深啊 /* 求从路1走到路i的最小危险值, 给出n条路的起点和终点,当i,j两路有重合的,我们使map[i][j]=v[j]: 把路当作最短路中的点,如果有重 ...

  7. 回滚Swtichover

    从11.2.0.2开始,如果由于某种原因switchover没有成功,可以回滚switchover. For physical standby databases in situations wher ...

  8. 关于OpenXml SpreadSheet列宽根据内容的Auto-suitability

          因为之前接到的一个需求,让excel的宽度自动适应.所以最近一直在看Excel相关内容,从结构到.net的两个类库OpenXml和Office.Interop.Excel,再到一些具体的使 ...

  9. Molecule to atoms

    For a given chemical formula represented by a string, count the number of atoms of each element cont ...

  10. phpstorm 设置多项目并存

    phpstorm 或 webstorm 设置多个项目可以并存: File -> settings -> Directories -> Add Content Root 中添加你当前的 ...