Bootstrap 基础CSS - 表格（Tables）

来源：互联网发布：淘宝网男士冬季休闲鞋编辑：程序博客网时间：2024/05/09 19:24

标准结构

标签描述<table>用以包装表格化的数据<thead>容纳表格标题行 (<tr>)以标识表格列，<tbody>容纳表格行 (<tr>)<tr>容纳行内的一组单元格 (<td> or <th>)<td>默认的表格单元格<th>用于列头(或是行，取决于标签所在位置和区域)的特殊标签
必须置于 <thead> 标签内。<caption>表格用途的描述或摘要，对屏幕阅读器（视障人士读屏软件）非常有用

<table>  <caption>...</caption>  <thead>    <tr>      <th>...</th>      <th>...</th>    </tr>  </thead>  <tbody>    <tr>      <td>...</td>      <td>...</td>    </tr>  </tbody></table>

默认样式

行与行之间用水平线相隔。只需向<table>添加.table

<table class="table">  …</table>

表格的可选类

在.table后面可以添加下列任意类。

.table-striped可以使奇数行的背景设为灰色。

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

.table-bordered可以使边框显示。

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

.table-hover可以使鼠标悬停的行的背景变为灰色。

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

.table-condensed可以使行间距变小。

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

行的可选类

使用下列类可以使行的背景色变化，从而表达一定含义。

向<tr>添加.success、.error、.warning、.info。

...  <tr class="success">    <td>1</td>    <td>TB - Monthly</td>    <td>01/04/2012</td>    <td>Approved</td>  </tr>...