表格css样式 ——表格背景，隔行变色，触摸表格变色

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、表格背景
• 二、隔行变色
• 三、触摸表格行变色
• 总结

---

前言

我来给大家讲解一下

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、表格背景

代码如下（示例）：

首先：先写一个表格

 <div>

        <table>

            <thead>

                <th>序号</th>

                <th>商品名称</th>

                <th>单价/元</th>

                <th>数量</th>

                <th>商品名称</th>

                <th>单价/元</th>

                <th>数量</th>

            </thead>

            <tbody>

                <tr>

                    <td>1</td>

                    <td>电脑显示屏</td>

                    <td>1000</td>

                    <td>36</td>

                    <td>电脑主机</td>

                    <td>2000</td>

                    <td>36</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>投影仪</td>

                    <td>500</td>

                    <td>3</td>

                    <td>音箱</td>

                    <td>300</td>

                    <td>5</td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>电脑桌</td>

                    <td>500</td>

                    <td>40</td>

                    <td>椅子</td>

                    <td>100</td>

                    <td>40</td>

                </tr>

                <tr>

                    <td>4</td>

                    <td>电灯</td>

                    <td>20</td>

                    <td>50</td>

                    <td>空调</td>

                    <td>2000</td>

                    <td>5</td>

                </tr>

                <tr>

                    <td>5</td>

                    <td>笔记本</td>

                    <td>20</td>

                    <td>40</td>

                    <td>练习册</td>

                    <td>10</td>

                    <td>40</td>

                </tr>

        </table>

    </div>

css代码如下

 table {
            border: 1px solid gainsboro;
            border-collapse: collapse;
            /*合并但与个*/
            text-align: center;
            width: 800px;
        }
        
        tr td {
            border: 1px solid gainsboro;
            height: 50px;
        }
        
        thead th {
            height: 30px;
            background-color: black;
            color: white;
        }

2.隔行变色

 

代码如下（示例）：

css样式如下

tbody tr:nth-child(2n) {

            background-color: aqua;

        }

       

        tbody tr:nth-child(2n-1) {

            background-color: green;

        }

2n 偶数行   2n-奇数行

 

3.触摸表格行变色

代码如下（示例）：

css样式如下

 tbody tr:hover {
            background-color: antiquewhite;
        }

---

总结

表格css基本样式