色块图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*#191970*/
        table {
            width: 100%;
            border: 1px solid #cccccc;
            font-size: 12px;
            padding-bottom: 5px;
        }

        th {
            border-bottom: 1px solid #cccccc;
            text-align: left;
        }

        th, td {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 5px
        }

        td {
            position: relative;
        }

        td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(6) {
            padding-left: 5px;
            border-top: 5px solid white;
            border-right: 5px solid white;
        }

        .bac {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #0000ff;
            top: 0;
            left: 0;
        }

        .num {
            position: absolute;
            display: inline-block;
            top: 7px;
            left: 5px;
        }
    </style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
    <tr>
        <th>日期</th>
        <th>新用户</th>
        <th>次日</th>
        <th>3日</th>
        <th>7日</th>
        <th>30日</th>
    </tr>

    <tr>
        <td>2018-02-03</td>
        <td>222</td>
        <td>
            <div class="bac" style="opacity: 0.1"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.2"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.3"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.4"></div>
            <span class="num">4.555%</span></td>
    </tr>
    <tr>
        <td>2018-02-03</td>
        <td>222</td>
        <td>
            <div class="bac" style="opacity: 0.6"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.5"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.4"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.3"></div>
            <span class="num">4.555%</span></td>
    </tr>

    <tr>
        <td>2018-02-03</td>
        <td>222</td>
        <td>
            <div class="bac" style="opacity: 0.9"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.8"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.7"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.6"></div>
            <span class="num">4.555%</span></td>
    </tr>
    <tr>
        <td>2018-02-03</td>
        <td>222</td>
        <td>
            <div class="bac" style="opacity: 0.6"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.7"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.8"></div>
            <span class="num">4.555%</span></td>
        <td>
            <div class="bac" style="opacity: 0.9"></div>
            <span class="num">4.555%</span></td>
    </tr>
</table>
<script>
</script>
</body>
</html>













































posted @ 2018-05-07 11:38  刘浩2561179983  阅读(189)  评论(0)  编辑  收藏  举报