使用table佈局,複合表頭table表格

  • 代碼

<!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>
  • 最終效果

Image 2.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章