使用table布局复合表头table表格

jiezi
5 年前
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {background: #0A1B6D;}

        table {
            border-collapse: collapse;
            color: #F6F7F9;
        }

        .myTable td {
            border: 1px solid #294485;
            text-align: center;
        }

        .myTable td span {
            margin: 5px;
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
        }
        .red-bg{background: linear-gradient(to right, #FF007C, #FF001E);

        }
        .blue-bg{background: linear-gradient(to right, #22DFE0, #23E1E1);

        }
        .white-bg{
            color: #101313;
            background: linear-gradient(to right, #D0EDF0, #D0EDF0);

        }
        .yellow-bg {
            color: #101313;
            background: linear-gradient(to right, #FFD600, #F69F04);

        }

    </style>
</head>
<body>
<table class="myTable">
    <tr>
        <td rowspan="4" style="width:20px;">1 号风机 </td>
        <td rowspan="2"> 静压 <br/>(Kpa)</td>
        <td rowspan="2"></td>
        <td colspan="5"> 电机温度 </td>
        <td colspan="2"> 电机振动 </td>
        <td colspan="3"> 电机电压 </td>
        <td colspan="2"> 电机功率 </td>
        <td colspan="3"> 电机电流 </td>
    </tr>
    <tr>
        <td> 前轴 ()</td>
        <td> 后轴 ()</td>
        <td> 定子 1()</td>
        <td> 定子 2()</td>
        <td> 定子 3()</td>
        <td> 水平 (mm)</td>
        <td> 垂直 (mm)</td>
        <td>A 电压 (V)</td>
        <td>B 电压 (V)</td>
        <td>C 电压 (V)</td>
        <td> 有功 (KW)</td>
        <td> 无功 (KVA)</td>
        <td>A 电流 (A)</td>
        <td>B 电流 (A)</td>
        <td>C 电流 (A)</td>
    </tr>
    <tr>
        <td rowspan="2">1.12</td>
        <td>1 级电机 </td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="blue-bg">41.96</span></td>
        <td><span class="blue-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="yellow-bg">41.96</span></td>
        <td><span class="yellow-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
    </tr>
    <tr>
        <td>2 级电机 </td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="red-bg">41.96</span></td>
        <td><span class="blue-bg">41.96</span></td>
        <td><span class="blue-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="yellow-bg">41.96</span></td>
        <td><span class="yellow-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>
        <td><span class="white-bg">41.96</span></td>

    </tr>
</table>
</body>
</html>
最终效果
代码

最终效果
