Bootstrap3 带条纹的表格样式

带条纹的表格

为 <table> 添加 .table-striped 类，就可以为 <tbody> 中的表格行添加条纹背景，即实现表格数据行的隔行换色效果。如：

<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

效果如图 2‑41所示：

图2-41 带条纹背景的表格

注意：这个效果是通过 :nth-child 选择器实现的，但 IE8 及以下的版本不支持这个选择器，需要考虑兼容性处理方案。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 带条纹的表格样式相关推荐

Bootstrap3 带边框的表格样式
带边框的表格为 <table> 添加 .table-bordered 类,就可以为表格中所有的单元格添加边框,同时也为整个表格添加边框.如: <table class=" ...
【table-4】带斑马纹的表格样式、动态更改表格中某一个单元格字体颜色
斑马纹表格(鼠标划过表格,表格颜色不变) 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态 <el-tabl ...
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
在网页制作中,通常会用到表格的鼠标悬停.隔行变色等功能.Bootstrap中提供了一系列表格布局样式,利用该样式可以帮助开发者快速开发出美观的表格,作用于<table>元素的表格样式如下表 ...
套用带标题行的表格样式_649.Excel技巧：如何利用表格样式快速美化表格？
之前牛闪君发表过一篇如何对表格进行专业美化的文章获得小伙伴的认可,但那种表格美化的方法效率相对比较低,通常都要手工设置字体大小,颜色,以及网格线等参数设置.有小伙伴也询问有没有快速美化表格的方法,例如 ...
套用带标题行的表格样式_比格式刷好用10倍，原来Excel表格还有这么神奇的功能！...
如果你经常从Excel模板库中下载模板,你会发现这些模板都用了同一个功能:自定义样式 Excel公式教程模板: 员工出勤表模板: 甘特项目规划器模板: why?为什么这些模板热衷于这个功能,到底有什么 ...
html语言制作带样式的表格,CSS实现的清爽、漂亮的表格样式分享
效果: 实现代码: 复制代码代码如下: CSS实现的清爽.漂亮的表格样式 - jb5t1.net /* CSS Document */ body { font: normal 11px auto &q ...
套用带标题行的表格样式_excel表格样式采用内置样式使用Excel 2010内置的单元格样式制作精美的表格效果...
excel表格样式采用内置样式使用Excel 2010内置的单元格样式制作精美的表格效果,最近到了季度汇报的时候,掌握一手excel技能在此刻显得多么重要,为了是你的excel看起来更高大上,今天教 ...
html表格美化模板,JavaScript + CSS 美化出的条纹表格样式
表格样式 body{ margin: 6px; padding: 0; font-size: 12px; font-family: tahoma, arial; background: #fff; } ...
vue引入重写样式修改Element-UI表格背景色以及悬浮背景色，带操作的表格也可以修改呦~
前言在用vue框架进行开发的时候,使用现成的UI组件库是十分方便的,但方便归方便,现成的它仍然不能满足我们所有的需求,为了达到预期的效果,我们仍需加以修改其样式,这里我采用的是将重写样式放入一个le ...

Bootstrap3 带条纹的表格样式

带条纹的表格

Bootstrap3 带条纹的表格样式相关推荐

最新文章

热门文章