共计 2474 个字符，预计需要花费 7 分钟才能阅读完成。
-
代码
<!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>
-
最终效果
正文完
