代码<!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>最终效果
