如何實現table表格中的斜線表頭效果

table表格，這個東西大家肯定都不陌生，程式碼中我們時常都能碰到，那麼給table加一個斜線的表頭有時是很有必要的，但是到底該怎麼實現這種效果呢？

我總結了以下幾種方法：

1、最最簡單的做法

直接去找公司的UI，讓她做一張圖片，作為背景圖片放到這裡，然後撐滿就好了。是不是很簡單！ ！ ！

2、相當簡單的做法

其實了解css3的朋友，一看到這個效果，腦中瞬間出現的就是transform這個屬性，是的，這個確實可以，也很簡單，就是有一個問題要注意瀏覽器的兼容性問題，大家心裡要時時刻刻保持危機意識（IE還存在呢），如果你們公司的要求是只相容於chrome，那麼，這個方法很適合你。

3、十分簡單的做法

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

<td><div></div></td>

這種方法也很簡單，按照上面的格式寫下來就好了。但是這種寫法有個明顯的問題：這種其實就是利用兩種顏色的不同的border劃分錶頭的斜線的，斜線兩邊的顏色不能相同，如果是做一些促銷活動之類的表格時可以用這種方法。但是如果我們需要斜線兩邊的顏色一樣時，這種做法是不適用的。慎用。

4、很簡單的做法

這種效果其實還可以用css3的另一個新的標籤canvas。將其作為畫布畫一條斜線是一種十分簡單的做法，就不詳細解釋了，但是也有一個問題，就是老生常談的兼容性問題了，如果只是兼容chrome，你想怎麼辦都行（為什麼我們公司一直要考慮可惡的IE，我也想只做相容谷歌的專案啊）。

5、不簡單的做法

那就是js做法了

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      <title>斜线表头</title>  <meta>    
    <br>  <div>header</div>  <hr>  

                                                  

                  

	成绩
姓名

数学

英语

C语言

张三

55

66

77

李四

99

68

71

王五

33

44

55

  <script> function a(x, y, color) { document .write("<img border=&#39;0&#39; style=&#39;position: absolute; left: " + (x) + "; top: " + (y) + ";background-color: " + color + "&#39; src=&#39;px.gif&#39; style="max-width:90%"如何實現table表格中的斜線表頭效果" >") } 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, &#39;#000000&#39;); line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth, getTop(td2) + td2.offsetHeight, &#39;#000000&#39;); </script>    

好了，五種方法都說完了，希望可以對大家有幫助

以上是如何實現table表格中的斜線表頭效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！