标签：
Table对角线的画法
方法一：SVG(Scalable Vector Graphics) 是一种基于XML的开放的矢量图形描述语言。
示例代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>table的对角线</title>
</head>
<body topmargin="100px;">
<center>
<table cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;width:400px;">
<tbody>
<colgroup><col width="100px;"><col width="100px;"><col width="100px;"><col width="100px;"></colgroup>
<tr height="25px;">
<td height="25px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<line x1="0" y1="0" x2="100%" y2="100%" style="stroke:black;stroke-width:1"> </line>
</svg>
</td>
<td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
</tbody>
</table>
</center>
</body>
</html>
效果示意图：
方法二：js的几何画线方法
示例代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>table的对角线</title>
<script language="javascript">
function aline(x,y,color){//画线方法
document.write("<img border=‘0‘ style=‘position:absolute; left:"+(x+200)+";top:"+(y+200)+";background-color: "+color+"‘ width=1 height=1>")
}
</script>
</head>
<body leftmargin="200" topmargin="200">
<table cellpadding="0" cellspacing="0" border=‘1‘ style="border-collapse:collapse;width:400px;">
<colgroup><col width="100px;"><col width="100px;"><col width="100px;"><col width="100px;"></colgroup>
<tr height="25px;"><td id="td1"> </td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
</table>
</body>
<script language="javascript">
function line(x1,y1,x2,y2,color){
var temp;
if(x1>x2){
temp=x1;
x1=x2;
x2=temp;
temp=y1;
y1=y2;
y2=temp;
}
for(var i=x1;i<x2;i++){
x = i;
y = (y2- y1) / (x2 - x1) * (x - x1) + y1;
aline(x,y,color);
}
}
line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,‘#000000‘);//获取画线的坐标
//offsetLeft:返回元素的水平偏移位置。offsetTop:返回元素的垂直偏移位置。offsetWidth:返回元素的宽度。offsetHeight:返回元素的高度。
</script>
</html>
2、效果示意图：
方法三：插入自己所需的背景图片
1、 示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body style=‘background-image:url("table1.png");background-position: 540px 8px;background-repeat:no-repeat;‘>
<center>
<table cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;width:360px;">
<tbody>
<colgroup><col width="80px;"><col width="100px;"><col width="90px;"><col width="90px;"></colgroup>
<tr height="25px;"><td height="25px;" style="border-bottom:hidden;border-top:hidden;border-right:hidden;"></td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
<tr height="25px;"><td> </td><td> </td><td> </td><td> </td></tr>
</tbody>
</table>
</center>
</body>
</html>
2、 效果示意图：
补充第二种引入背景图片的方法：（建议使用）
<img src="${webapp}/shipCertificate/newcert/images/Diagonal1.gif" style=" position:relative; padding: 0px; border:none; left:0px;top: 0; width: 80px; height: 26px; ">
方法四：vml画对角线
方法五：transform:rotate（）画对角线
标签：
原文地址：http://www.cnblogs.com/jiangkaiou/p/4765950.html
