SVG.显示表格<table/>

不用自己绘制表格那么麻烦，使用 <foreignObject/>即可（注意 里面有一个<body/>，再里面才是 <table/>）

下面是一个例子:

 

ZC：注意：(1)、<foreignObject/>中的大写字母"O"，必须是大写，不然 Chrome（版本 51.0.2704.63 m）认不得

ZC：关注 这里的 <img/>的用法，它把图像的信息都使用 base64的形式写在 属性"src" 中了 !!

 

1、代码：

<?xml version="1.0" standalone="yes"?>      
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" width="800" height="500">
    <body xmlns="http://www.w3.org/1999/xhtml">
        <table  border="0" cellpadding="0" cellspacing="0" >
            <tr>
                <td width="8" style="border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:0"> </td>
                <td width="18%"  scope="col" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"> </td>
                <td width="22%"  scope="col" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><strong>数量</strong></td>
                <td width="22%"  scope="col" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><strong>占比</strong></td>
                <td width="36%"  scope="col" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><strong>环比上升（下降）</strong></td>
            </tr>
            <tr>
                <th scope="row" style="background-color:#f0a3bf;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px;border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:1px solid #fff"> </th>
                <td  scope="row" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><strong>分类 </strong></td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px">44</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px">11%</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><span class="up"></span>11%</td>
            </tr>
            <tr>
                <th  scope="row" style="background-color:#7ebfcc;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px;border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:1px solid #fff"> </th>
                <td  scope="row" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><strong>论坛 </strong></td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px">44</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px">11%</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><span class="down"></span>11%</td>
            </tr>
            <tr>
                <th scope="row" style="background-color:#83bc95;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px;border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:1px solid #fff"> </th>
                <td  scope="row" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><strong>博客 </strong></td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px">44</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px">11%</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><span class="down"></span>11%</td>
            </tr>
            <tr>
                <th scope="row" style="background-color:#e6605d;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px;border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:1px solid #fff"> </th>
                <td  scope="row" style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><strong>微博 </strong></td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px">44</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><img id="img" src="data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABVAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAACAQEBAQECAQECAwIBAgMDAgICAgMDAwMDAwMDBAMEBAQEAwQEBQYGBgUEBwcICAcHCgoKCgoMDAwMDAwMDAwMAQICAgQDBAcEBAcKCAcICgwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAASACgDAREAAhEBAxEB/8QAaAABAQADAAAAAAAAAAAAAAAABwAFCAkBAQAAAAAAAAAAAAAAAAAAAAAQAAEDAgYBAQYHAAAAAAAAAAECAwQFBgARIRIHCAlRMUEyE3MUIkJSsjW1OBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A6b+RDt5MpUo8EcXTlsVJlaHriqcNwocbWghxuI24gggggKcIPon9QwC50r7RxOxPHwhV1xCOUaMhDNXYGSfuEfCiW2kZDJeX4gPhV6ApwDTgB/u1yvb3G/BdbpFxR5ahcdPqFFgyorHzY6Jb8RaW0PL3DZuzJBy1yPpgNNOgnKtu8S87Gq3ExKkipwHaJBjUxj7h92XJlxVNoCNyfb8s654BN8rdvUCi1ey5VGgx4kmWmsOy3IzLbSnl74R3OFCQVHNR1PrgGbx2W9QGesNu3E1BjpuB1VTadnJZbEhaBVJA2qdCd5GSRoT7hgHjAYXkPj+1+UrLqFhXlHEm3qk0WH0aBST7UuIJB2rQoBST7iMAE9QOizXA151W/b5eaqVwsPPQrbW2M0tQzoZSgc9rziTty/KM9Tu0A98t38hYf06x+6DgGbx4f5Jtn6lT/tZOAbMBYCwH/9k="/>11%</td>
                <td style="border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px"><span class="down"></span>11%</td>
            </tr>  
        </table>
    </body>
</foreignObject>
</svg>

 

2、Chrome（版本 51.0.2704.63 m）中显示

 

3、

4、

5、

posted @ 2018-01-26 16:03  Html5Skill  阅读(3207)  评论(0)  编辑  收藏  举报