網頁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表格中畫斜線的幾種做法

您的項目需求