zoukankan      html  css  js  c++  java
  • 记录-通过raphael.min.js实现table表头斜线

    通过raphael.min.js实现table表头斜线

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script>
    </head>
    
    <body>
        <div id="lineDiv" style='position:absolute;z-index:9999;'></div>
        <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
            <tr>
                <td id="lineTd" style="border:#000000 solid 1px;219px;height:76px;vertical-align:top;"
                    points="[110,79,222,42,222,79]">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月份<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>省份&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;城市
                </td>
    
                <td style="text-align:center;border:#000000 solid 1px;height:45px;vertical-align:top;">201206</td>
            </tr>
            <tr>
                <td style="text-align:center;border:#000000 solid 1px;89px;height:32px;vertical-align:top;">潜在客户数</td>
                <td style="text-align:center;border:#000000 solid 1px;89px;height:32px;vertical-align:top;">新增客户数</td>
            </tr>
        </table>
    </body>
    <script>
        $(function () {
            var paper = new Raphael("lineDiv");
            paper.path("M0,0L110,85");//坐标(0,0)(110,85)
            paper.path("M0,0L220,52");//坐标(0,0)(220,42)
            //   paper.path("M0,0L220,79");//坐标(0,0)(220,79)
            var offset = $("#lineTd").offset();//td的位置
            //将画线的DIV移动到td的位置
            $("#lineDiv").offset({ top: offset.top, left: offset.left });
        })
    </script>
    
    </html>

    最终效果

    大家还有什么好的方法可以告诉我呀,谢谢啦~

  • 相关阅读:
    C++ 实现简单快速排序
    LEETCODE 198. House Robber
    leetcode 174
    GIT 版本的回退
    unorderd_map 自定义键值及哈希函数的重载
    互斥锁 形成死锁实例
    leetcode 300
    LeetCode 62
    LeetCode 122
    SVN提交,强制注释
  • 原文地址:https://www.cnblogs.com/Ananiah/p/14965585.html
Copyright © 2011-2022 走看看