用JS和HTML实现斜线表头

最新推荐文章于 2024-07-18 08:55:40 发布

祥灬子

最新推荐文章于 2024-07-18 08:55:40 发布

阅读量3.6k

点赞数

分类专栏： js 图表文章标签： js 图表

本文链接：https://blog.csdn.net/qq_17505335/article/details/78955439

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

图表

1 篇文章 0 订阅

订阅专栏

首先下载JS图形库API:wz_jsgraphics.js
第二步：编写html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>                    
      <title>Javascript table example.</title>  
      <script type="text/javascript" src="wz_jsgraphics.js"></script>  
      <style> 
        body{font-family:'微软雅黑';font-size:12px;color:white;}
        .box{width:300px;height:500px;margin:10px auto;}
        #table {  
            margin: 0px;   
            padding:0px;   
            border-collapse: collapse;  
            table-layout:fixed; 
            border:solid 1px white;   
        }  
        thead tr td{background:rgb(99,168,235);height:20px;}
        tbody tr td{color:#000;}
        .table_td {  
            border: solid 1px #e4e4e4;
            width:80px;
            text-align: center;  
            height:40px;
            line-height:40px;
        }  
    </style>  
    </head>  
<body>  
    <!-- 定义绘制图形的区域，调用jsGraphics提供的对象及相关的方法以完成斜线的绘制-->
    <div id="Canvas" style="position:relative;height:5px;width:5px;"></div>  
    <script type="text/javascript">  
        var jg = new jsGraphics("Canvas");    
        jg.setColor("white");  
        jg.drawLine(524, 15, 600, 55); 
        jg.drawLine(524, 15, 740, 55);
        jg.paint();  
    </script>   
        <div class="box">
        <table id="table">  
            <thead>  
                    <tr>  
                        <td style="padding-top:20px;width:70px;">人名</td>  
                        <td style="padding-top:22px;width:80px;">卡号</td> 
                        <td style="padding-bottom:18px;width:70px;">指标</td> 
                        <td class="table_td">信用卡支出</td>  
                    </tr>  
                </thead>  
            <tbody>   
                <tr>  
                    <td class="table_td">1</td>  
                    <td colspan="2" class="table_td">理论</td>  
                    <td class="table_td">实践</td>  
                </tr>                         
                <tr>  
                    <td class="table_td">3</td>  
                    <td colspan="2" class="table_td">实践</td>  
                    <td class="table_td">理论</td>  
                </tr>   
            </tbody>  
        </table> 
        </div>
      </body>  
    </html>