简单的表格斑马样式实现

最新推荐文章于 2024-03-19 10:24:13 发布

weixin_30733003

最新推荐文章于 2024-03-19 10:24:13 发布

阅读量460

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fanlijin/p/7716141.html

版权

　　表格的斑马样式即根据行数来实现不同的样式，用最简单的背景样式　　这种样式的实现很简单，代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
　　tr:nth-child(2n){
　　　　background-color: #2AABD2;
　　}
　　tr:nth-child(2n+1){
　　　　background-color:#3E8F3E;
　　}
</style>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
<table class="table">
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>权限</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>123</td>
<td>管理员</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>123</td>
<td>管理员</td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>123</td>
<td>管理员</td>
</tr>
<tr>
<td>4</td>
<td>张三</td>
<td>123</td>
<td>管理员</td>
</tr>
</table>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>

　　这种样式的实现主要利用的css样式中的:nth-child选择器，他可以自动判断奇偶行来进行样式的设定，就可以实现斑马纹的效果了。

　　:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

　　注意：各大主流浏览器基本支持，除了IE8以及更早版本。

转载于:https://www.cnblogs.com/fanlijin/p/7716141.html

weixin_30733003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的表格斑马样式实现

　　表格的斑马样式即根据行数来实现不同的样式，用最简单的背景样式　　这种样式的实现很简单，代码如下<!DOCTYPE html><html><head><meta charset="utf-8" /><link rel="stylesheet" href="css/bootstrap.min.css" /&gt...
复制链接

扫一扫