网页table表格中画斜线的几种做法

格table上的斜线，一般用在首行首列上，这个东西大家肯定都不陌生，在excel打印文档时我们时常都能碰到，那么在html中如何给table添加这个效果呢？

我总结了以下几种方法：

1、最最最简单的做法

直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！

2、相当简单的做法

其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的兼容性问题，大家心里要要时刻保持着危机意识（IE还存在呢），如果你们公司的要求是只兼容chrome，那么，这个方法很适合你。

3、十分简单的做法

.biaoTou {
       border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/  
       border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/  
}
<td width="200">
    <div class="biaoTou">
                        
    </div>
</td>

这种方法也很简单，按照上面的格式写下来就好了。但是这种写法有个明显的问题：这种其实就是利用两种颜色的不同的border划分表头的斜线的，斜线两边的颜色不能相同，如果是做一些促销活动之类的表格时可以用这种方法。但是如果我们需要斜线两边的颜色一样时，这种做法是不适用的，慎用。

4、很简单的做法

这种效果其实还可以用css3的另一个新的标签canvas。将其作为画布画一条斜线是一种十分简单的做法，就不详细解释了，但是也有一个问题，就是老生常谈的兼容性问题了，如果只是兼容chrome，你想怎么办都行（为什么我们公司一直要考虑可恶的IE，我也想只做兼容谷歌的项目啊）。

5、不简单的做法

那就是js做法了

<!DOCTYPE html>  
<HTML>  
<HEAD>  
<TITLE>斜线表头</TITLE>  
<meta http-equiv="content-type" content="text/html; charset=utf-8">  
</HEAD>  
  
<body leftmargin=0 topmargin=0>  
    <br>  
    <div height="300">header</div>  
    <hr>  
    <TABLE border=0 bgcolor="000000" cellspacing="1" width=400  
        style="margin-left: 100px;">  
        <TR bgcolor="FFFFFF">  
            <TD width="111" height="52"><table width="100%" height="100%"  
                    border="0" cellpadding="0" cellspacing="0">  
                    <tr>  
                        <td id="td1"></td>  
                        <td>成绩</td>  
                    </tr>  
                    <tr>  
                        <td>姓名</td>  
                        <td id="td2"></td>  
                    </tr>  
                </table></TD>  
            <TD width="81">数学</TD>  
            <TD width="96">英语</TD>  
            <TD width="99">C语言</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>张三</TD>  
            <TD>55</TD>  
            <TD>66</TD>  
            <TD>77</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>李四</TD>  
            <TD>99</TD>  
            <TD>68</TD>  
            <TD>71</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>王五</TD>  
            <TD>33</TD>  
            <TD>44</TD>  
            <TD>55</TD>  
        </TR>  
    </TABLE>  
    <script type="text/javascript">  
        function a(x, y, color) {  
            document  
                    .write("<img border='0' style='position:absolute; left:"  
                            + (x)  
                            + "; top:"  
                            + (y)  
                            + ";background-color: "  
                            + color  
                            + "' src='px.gif' width=1 height=1>")  
        }  
        function getTop(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetTop;  
            while (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetTop;  
                vParentvParent = vParent.offsetParent;  
            }  
            return t;  
        }  
  
        function getLeft(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetLeft;  
            while (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetLeft;  
                vParentvParent = vParent.offsetParent;  
            }  
            return t;  
        }  
        function line(x1, y1, x2, y2, color) {  
            var tmp  
            if (x1 >= x2) {  
                tmp = x1;  
                x1 = x2;  
                x2 = tmp;  
                tmp = y1;  
                y1 = y2;  
                y2 = tmp;  
            }  
            for ( var i = x1; i <= x2; i++) {  
                x = i;  
                y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;  
                a(x, y, color);  
            }  
        }  
        //line(1,1,100,100,"000000");   
        line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,  
                getTop(td1) + td1.offsetHeight, '#000000');  
        line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,  
                getTop(td2) + td2.offsetHeight, '#000000');  
    </script>  
</BODY>  
</HTML>

需jq库

<!doctype html>
<html>
<head>
<title>new document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery.js"></script>
<style type="text/css">
table td {
	border: 1px solid #666;
	padding: 1px;
}
.np {
	padding: 0;
}
.container {
	width: 100%;
	height: 100%;
	position: relative;
	left: 0;
	top: 0;
	margin: 0;
}
.bias_line {
	position: absolute;
}
.left_text {
	position: absolute;
	left: 2px;
	bottom: 2px;
}
.right_text {
	position: absolute;
	top: 2px;
	right: 2px;
	text-align: right;
}
</style>
</head>
<body>
<table style="width: 100%;">
  <tr>
    <td style="width:50%; height:50px;" class="np">
<div class="container">
<div class="left_text">项目</div>
       <div class="right_text">日期</div>
       <div class="bias_line"></div>
      </div>
    </td>
    <td>sss</td>
  </tr>
</table>
<script type="text/javascript">
//表格添加斜线
        $(document).ready(function () {
            var arr = [],
                        fx = function (t, b, c, d) {
                            return c * t / d + b;
                        }, i = 0;
            var height = $(".container").parent().height();
            var width = $(".container").parent().width();
            var color = $(".container").parent().css("border-left-color");
            for (var i = 0; i < width; i++) {
                arr.push('<div style="width:1px;height:1px;font-size:0;background-color:' + color + ';position:absolute;left:' + (i - 1) + 'px;top:' + (Math.ceil(fx(i, 0, height, width))) + 'px"><\/div>');
            }
            $(".bias_line").html(arr.join(''));
        });
    </script>
</body>
</html>

说起html的编辑那才真叫个让人头痛，前段时间就因为一个html的斜线绘制法，找遍了百度搜索引擎，把我搞得头痛万分，最后终于是解决了，没想到就是那么几句话，可是我却找了整整几天的时间，太费事了。不说那么多了，还是看看我这总结的<v:line>在html中的作用吧，可别小视了它，它的作用大着呢。如果你能控制好的话还可以做出非常好看的折线统计图来，今天就分享给大家吧，这么好的一串代码：

　　首先你要在见面的开头<html>标签中加入对象： xmlns:v="urn:schemas-microsoft-com:vml"。大家一看便知晓，是一个microsoft组件标签。

　　其次我们要重新定义一个样式：v\:* { BEHAVIOR: url(#default#VML); color: #FF0000; }

　　最后我们利用<v:line>中的form,to属性来操作折线的起始和结束的位置，如：<v:line from="0,0" to="50,50"></v:line>。

果是自己用 table 实现的表格，可以用下面的两个方法：

1. 直接做一个带有斜线和文字的图片，在 html 中引用。

缺点：要求图片大小能和格子大小相同。页面做了自适应的功能的话，图片上的线可能会失真，效果不够理想。

2. 用 css3 的标签 canvas，将其作为画布画一条斜线。

缺点：会存在浏览器兼容性问题，如果只需要在 chrom 中使用可以考虑。

其实现在大部分项目中做表都会用报表工具，工具中就基本都有这个功能了，设置方式也很简单，润乾报表中只要直接点选个按钮就轻松实现效果，也不用担心有什么浏览器兼容的问题，具体可以参考看下文章那些特殊边框效果在报表中要怎样实现？ - 乾学院
文章中除了斜线表头外，还有其他类型的特殊边框效果的实现方法。

文讨论，如何对目录自动加/

第一步，打开conf的配置文件

第二步监听8082端口，配置server_name localhost;内容

root查html目录，index搜索其中的index.html文件

server块 {
    listen 8082;


    server_name localhost;
    location /heima {
        root html;
        index index.html;


    }
}

第三步:这里出现了404的错误，错误的原因是因为文件资源寻找需要到 /heima目录下的 html文件的index.html文件，现在没有，找不到出错了

第四步切换到html页面，创建heima文件，切换，利用>将内容装进去

第五步利用cat可以查看index.html页面的内容

带个/和不带/的区别是什么？

把/去掉之后，它发送的请求有两个，一个是301短期重定向，一个是200永久重定向

但如果是访问的/访问的路径,最终只有一个请求，就是200

分析：

如果不加斜杠，Nginx服务器内部会自动做一个301的重定向，重定向的地址会有一个指令叫server_name_in_redirec onloff;来决定重定向的地址:

如果该指令为on 重定向的地址为: http://server_name/目录名/;

如果该指令为off 重定向的地址为: http://原URL中的域名/目录名/;

这句话什么意思？

如果把server_name_in_redirec 设置成了on 路径就会变为了http://localhost:8082/heima/这个路径，会变成localhost

端口未提供服务，就会报错

所以就拿刚才的地址来说， http://192.168.200.133/hm如果不加斜杠，那么按照上述规则，如果指令server_name_in_redirect为on，则301重定向地址变为 http://localhost/hm/,如果为off，则301重定向地址变为 ttp://192.168.200.133/ht/。后面这个是正常的，前面地址就有问题。

注意server_name_in_redirect指令在Nginx的0.8.48版本之前默认都是 on，之后改成了off,所以现在我们这个版本不需要考虑这个问题，但是如果是0.8.48以前的版本并且server_name_in_redirect设置为on，我们如何通过rewrite来解决这个问题？

手动给他改一下，第一步，切换到conf文件下，vim打开配置文件

手动配置，在server_name_in_redirect on中进行打开

打开之后就会出现一个明显的问题，带/就能够正常访问

不带/就不能够正常访问，就转圈圈了，因为它最终会把自己的服务重定向到localhost/heima/

这种情况，主要适用于，目录加/的情况，如果访问的是一个html页面，真实在使用的情况中，只有添加了目录，才最好加/

$host就是自己设置的主机IP，$server_port获取的是8082,加上下面if这句话的意思是主要判断，

index.html，设置的是一个页面，不发生映射跳转

如果是永久重定向，用permanent进行设置

测试经过 192.168.200.133:8082/heima/ 这种带/最终返回了200状态码

如果不带/，会发送一个302和200的状态码，同时下面的内容也多了一个/

为什么多了一个/,原因是下面的在匹配的时候，已经匹配了/，所以在URL重定向的路径多了一个/，解决多了/的方法是

将server_port后面/去掉，直接加上就好了

最终//的内容消失不见了

在线咨询

上一篇：联想最实惠学生机哪里找？精英大侠来帮你
下一篇：IDEA 2021首个大版本发布，Java开发者感动哭了（附新亮点演示）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页table表格中画斜线的几种做法

您的项目需求