Bootstrap 基础表格(Tables)和样式CSS
Bootstrap 基础表格(Tables)和样式CSS
提广乾 发表于3年前
Bootstrap 基础表格(Tables)和样式CSS
  • 发表于 3年前
  • 阅读 2149
  • 收藏 7
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

标准结构

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

[html] view plaincopy

  1. <table>  

  2.   <caption>...</caption>  

  3.   <thead>  

  4.     <tr>  

  5.       <th>...</th>  

  6.       <th>...</th>  

  7.     </tr>  

  8.   </thead>  

  9.   <tbody>  

  10.     <tr>  

  11.       <td>...</td>  

  12.       <td>...</td>  

  13.     </tr>  

  14.   </tbody>  

  15. </table>  


默认样式

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

[html] view plaincopy

  1. <table class="table">  

  2.   …  

  3. </table>  


表格的可选类

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


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

[html] view plaincopy

  1. <table class="table table-striped">  

  2.   …  

  3. </table>  


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

[html] view plaincopy

  1. <table class="table table-bordered">  

  2.   …  

  3. </table>  


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

[html] view plaincopy

  1. <table class="table table-hover">  

  2.   …  

  3. </table>  


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

[html] view plaincopy

  1. <table class="table table-condensed">  

  2.   …  

  3. </table>  


行的可选类

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

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

[html] view plaincopy

  1. ...  

  2.   <tr class="success">  

  3.     <td>1</td>  

  4.     <td>TB - Monthly</td>  

  5.     <td>01/04/2012</td>  

  6.     <td>Approved</td>  

  7.   </tr>  

  8. ... 


标签: bootstrap table css
共有 人打赏支持
粉丝 18
博文 53
码字总数 42618
×
提广乾
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: