百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

使用css选择器实现表格隔行换色

作者:鹏仔先生日期:2020-06-22 11:32:03浏览:6663分类:CSS

使用css选择器实现表格隔行换色

使用css选择器实现表格隔行换色

在线运行

<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		padding: 200px;
		box-sizing: border-box;
	}
	table{
		border-collapse: collapse;
	}
	td,th{
		color: #000;
		font-size: 16px;
		line-height: 30px;
		border: 1px solid #333;
		padding: 0 15px;
		box-sizing: border-box;
	}
	tbody tr:nth-child(odd){
	    background: rgba(204,255,255,.6);
	}
</style>
<table>
	<thead>
		<tr>
			<th>共享博客</th>
			<th>共享博客</th>
			<th>共享博客</th>
			<th>共享博客</th>
			<th>共享博客</th>
			<th>共享博客</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
		</tr>
		<tr>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
		</tr>
		<tr>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
		</tr>
		<tr>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
		</tr>
		<tr>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
			<td>鹏仔先生</td>
		</tr>
	</tbody>
</table>

设置表格奇数行变色

tbody tr:nth-child(odd){
    background: #f7f8f9;
}

设置表格偶数行变色

table tr:nth-child(even){
    background: #f7f8f9;
}


扩展一:表格边框合并

table{
	border-collapse: collapse;
}

扩展二:带有 thead、tbody、tfoot 元素的 HTML 表格

<thead></thead>

标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。


<tfoot></tfoot>

标签定义表格的页脚(脚注或表注)


<tbody></tbody>

标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。


相关教程

css 结构性伪类选择器 https://www.sharedbk.com/post/119.html


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯