Bootstrap 基础CSS - 表格（Tables）

发布时间：2020-12-17 21:17:08 所属栏目：安全来源：网络整理

导读：标准结构标签描述 table 用以包装表格化的数据 thead 容纳表格标题行 ( tr )以标识表格列， tbody 容纳表格行 ( tr ) tr 容纳行内的一组单元格 ( td ?or? th ) td 默认的表格单元格 th 用于列头(或是行，取决于标签所在位置和区域)的特殊标签必须置于? th

标准结构

标签	描述
`<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>
...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!