纯css表格table隔行显示不同颜色

 时间:2026-04-27 22:01:08

1、制作简单表格,代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

table,tr,td,th{

padding: 0;

margin: 0;

}

table{

width: 100%;

border-color: #ccc;

}

table tr{

line-height: 30px;

border-color: #ccc;

}

table th,table td{

text-align: center;

border-color: #ccc;

}

</style>

</head>

<body>

<table border="1" cellspacing="0">

<tr>

<th>1</th>

<th>2</th>

<th>3</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

</table>

</body>

</html>

2、表格样式为:

纯css表格table隔行显示不同颜色

3、添加属性样式:

table tr:nth-child(odd){

background: #ccc;

}

结果如图所示可设置奇数行背景

纯css表格table隔行显示不同颜色

4、当需要偶数行背景时使用样式:

table tr:nth-child(even){

background: #ccc;

}

纯css表格table隔行显示不同颜色

  • Shell如何使用位置变量
  • 田园图片设计
  • 家里应该放些什么花
  • QQ怎么设置不允许陌生人赞我的说说?
  • Webstrom如何查看本地Git更改的记录
  • 热门搜索
    积极向上的手抄报 关于珍爱生命的手抄报 植树节英语手抄报内容 关于传染病的手抄报 小学生食品安全手抄报 节约水资源手抄报 英语节日手抄报图片 手抄报数学 关于感恩节的手抄报 爱的手抄报内容