使用CSS设置表格隔行变色

html-css010

使用CSS设置表格隔行变色,第1张

在CSS中可使用:nth-child()选择器来实现表格隔行变色效果。:nth-child()选择器用于根据元素在一组兄弟中的位置来匹配元素;它匹配第n个子元素。语法:其中arg是表示匹配元素的模式的参数;它可以是一个数字(number)、一个关键字(odd 或 even)或一个函数式。想要隔行设置表格的行颜色需要使用到关键字(odd 或 even),下面就来介绍一下: ●  odd :表示位置为奇数的元素,即1,3,5等。 ●  even: 表示位置为偶数的元素,即2,4,6等。示例1: 为在表中交替的偶数行设置颜色 效果图:示例2: 为在表中交替的奇数行设置颜色 效果图: 更多 web开发 知识,请查阅 HTML中文网 !!

参考代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        table {

            border-collapse: collapse

        }

        table, tr, td, th {

            border: 4px solid black

        }

        th, td {

            width: 200px

            height: 50px

            text-align: center

        }

    </style>

</head>

<body>

<table>

    <tr style="height: 100px">

        <td colspan="3">

            <span style="display: blockpadding: 10pxborder: 3px solid blackwidth: 500pxfont-size: 23pxmargin: autofont-weight: bold">扫码文本框</span>

        </td>

        <td><span style="display: blockwidth: 70pxmargin: auto">加载历史入库信息</span></td>

    </tr>

    <tr>

        <th>产品名称</th>

        <th>装箱数量</th>

        <th>箱数<span style="font-size: 10px">(默认1箱)</span></th>

        <th>1</th>

    </tr>

    <tr>

        <td>A</td>

        <td>100</td>

        <td>1</td>

        <td>2</td>

    </tr>

    <tr>

        <td>B</td>

        <td>100</td>

        <td>1</td>

        <td rowspan="4"></td>

    </tr>

    <tr>

        <td>A</td>

        <td>100</td>

        <td>1</td>

    </tr>

    <tr>

        <td>合计:</td>

        <td>300</td>

        <td>3</td>

    </tr>

    <tr>

        <td colspan="3"><span style="display: blockpadding: 5pxborder: 3px solid blackwidth: 500pxfont-size: 20pxmargin: autofont-weight: bold">确认</span></td>

    </tr>

</table>

</body>

</html>

效果如下图: