带斑马线的表格

Posted lonecloud

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带斑马线的表格相关的知识,希望对你有一定的参考价值。

  

<h1>斑马线表格</h1>
<table class="table table-striped">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>

刚已经说了,Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

  ?  .table:基础表格

  ?  .table-striped:斑马线表格

  ?  .table-bordered:带边框的表格

  ?  .table-hover:鼠标悬停高亮的表格

  ?  .table-condensed:紧凑型表格

  ?  .table-responsive:响应式表格

以上是关于带斑马线的表格的主要内容,如果未能解决你的问题,请参考以下文章

桌子分拣机-斑马剥离

JavaScript斑马线表格制作

具有 Rowspan 悬停和斑马效果的表格

bootstrap表格

三线表是什么?R语言使用table1包绘制(生成)三线表使用单变量分列构建三线表通过topclass参数自定义三线表表格的显示形式(显示为类似斑马线并添加表格网格)

bootstrap 之css样式