首页 > 软件开发 > HTML >

如何利用css设置表格隔行间条样式

来源:互联网 2023-03-16 19:16:40 92

我们在html页面上创建表格后,如果想为表格的每一行设置间条样式,怎么设置?比如在单数行显示一种样式,在双数行显示另一种样式,下面来看一下是怎么处理的。p34办公区 - 实用经验教程分享!

如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

方法/步骤

  • 1

    我们在html里先创建一个table表格。p34办公区 - 实用经验教程分享!

    如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

  • 2

    创建后,运行页面,默认是这样的样式,没有间条效果。p34办公区 - 实用经验教程分享!

    如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

  • 3

    要设置间条样式,我们需要为tr行添加nth-child(even)的伪类样式,其中even是表示双数行,如果要设置单数行,可以改为odd。p34办公区 - 实用经验教程分享!

    如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

  • 4

    在样式里面,设置背景色和字体色就行了。p34办公区 - 实用经验教程分享!

    如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

  • 4相关内容未经授权抓取自百度经验
  • 5

    运行页面,可以看到表格的双数行显示不一样的背景色和字体颜色了,有间条效果了。p34办公区 - 实用经验教程分享!

    如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

  • 6

    如果你需要为单数行也设置不一样的背景色,我们可以直接为tr添加样式,设置背景色就可以了。p34办公区 - 实用经验教程分享!

    如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

  • 7

    重新运行页面,可以看到另一种间条效果了。p34办公区 - 实用经验教程分享!

    如何利用css设置表格隔行间条样式?p34办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!p34办公区 - 实用经验教程分享!


    标签: HTMLCSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码