我們在表格中經常會有這樣的需求，如果某單元格不需要數據，則將單元格對角線劃一個斜線，今天項目用到，由於不需要兼容性，所以沒考慮兼容性，只適應IE下，完美主義者慎入。
直接附上代碼，用了jquery，如不用jquery可以適當修改下代碼，IE下可用：
View Code
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head><title>Line</title>
</head>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML)}
table{background-color:#000;}
tr{background-color:#FFF;}
td{height:25px;text-align:center;}
</STYLE>
<script language="javascript">
function showLine(jqObj)
{
var comObj = $(jqObj)[0];
var fromStr = comObj.offsetLeft+","+comObj.offsetTop;
var toStr = (comObj.offsetLeft+comObj.offsetWidth)+","+(comObj.offsetTop+comObj.offsetHeight);
var lineStr = "<center><v:line from='"+fromStr+"' id='abc' to='"+toStr+"' style='position:relative;'/></center>";
comObj.innerHTML = lineStr;
}
$(document).ready(function(){
$(".line").each(function(){
showLine(this);
});
})
</script>
<body>
<table cellpadding="0" cellspacing="1" border="0">
<tr>
<td width="120" class="line"></td>
<td width="120">語文</td>
<td width="120">數學</td>
<td width="120">英語</td>
</tr>
<tr>
<td>小剛</td>
<td>50</td>
<td class="line"></td>
<td>80</td>
</tr>
<tr>
<td>小明</td>
<td class="line"></td>
<td>70</td>
<td>99</td>
</tr>
<tr>
<td>小紅</td>
<td>70</td>
<td>80</td>
<td class="line"></td>
</tr>
</table>
</body>
<head><title>Line</title>
</head>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML)}
table{background-color:#000;}
tr{background-color:#FFF;}
td{height:25px;text-align:center;}
</STYLE>
<script language="javascript">
function showLine(jqObj)
{
var comObj = $(jqObj)[0];
var fromStr = comObj.offsetLeft+","+comObj.offsetTop;
var toStr = (comObj.offsetLeft+comObj.offsetWidth)+","+(comObj.offsetTop+comObj.offsetHeight);
var lineStr = "<center><v:line from='"+fromStr+"' id='abc' to='"+toStr+"' style='position:relative;'/></center>";
comObj.innerHTML = lineStr;
}
$(document).ready(function(){
$(".line").each(function(){
showLine(this);
});
})
</script>
<body>
<table cellpadding="0" cellspacing="1" border="0">
<tr>
<td width="120" class="line"></td>
<td width="120">語文</td>
<td width="120">數學</td>
<td width="120">英語</td>
</tr>
<tr>
<td>小剛</td>
<td>50</td>
<td class="line"></td>
<td>80</td>
</tr>
<tr>
<td>小明</td>
<td class="line"></td>
<td>70</td>
<td>99</td>
</tr>
<tr>
<td>小紅</td>
<td>70</td>
<td>80</td>
<td class="line"></td>
</tr>
</table>
</body>
效果圖：
