当前位置:编程学习 > html/css >>

Bootstrap 基础CSS - 表格(Tables)

标准结构
标签 描述
<table> 用以包装表格化的数据
<thead> 容纳表格标题行 (<tr>)以标识表格列,
<tbody> 容纳表格行 (<tr>)
<tr> 容纳行内的一组单元格 (<td> or <th>)
<td> 默认的表格单元格
<th> 用于列头(或是行,取决于标签所在位置和区域)的特殊标签
必须置于 <thead> 标签内。
<caption> 表格用途的描述或摘要,对屏幕阅读器(视障人士读屏软件)非常有用
[html]  
<table>  
  <caption>...</caption>  
  <thead>  
    <tr>  
      <th>...</th>  
      <th>...</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>...</td>  
      <td>...</td>  
    </tr>  
  </tbody>  
</table>  
 
默认样式
行与行之间用水平线相隔。只需向<table>添加.table
[html] 
<table class="table">  
  …  
</table>  
 
表格的可选类
在.table后面可以添加下列任意类。
 
.table-striped可以使奇数行的背景设为灰色。
[html]  
<table class="table table-striped">  
  …  
</table>  
 
.table-bordered可以使边框显示。
[html]  
<table class="table table-bordered">  
  …  
</table>  
 
.table-hover可以使鼠标悬停的行的背景变为灰色。
[html]  
<table class="table table-hover">  
  …  
</table>  
 
.table-condensed可以使行间距变小。
[html] 
<table class="table table-condensed">  
  …  
</table>  
 
行的可选类
使用下列类可以使行的背景色变化,从而表达一定含义。
向<tr>添加.success、.error、.warning、.info。
[html] 
...  
  <tr class="success">  
    <td>1</td>  
    <td>TB - Monthly</td>  
    <td>01/04/2012</td>  
    <td>Approved</td>  
  </tr>  
...  
 
补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,