表格斜线- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 表格斜线

技术文章搜索

关键字

CSS样式表中的表格斜线

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 140 ::

收藏到网摘: n/a

display&position 转载：On having layout

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<body leftmargin=20 topmargin=20>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400>
<TR bgcolor="FFFFFF"> <TD id="td1"> </TD> <TD>张三</TD> <TD>李四</TD> <TD>王五</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>
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(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000')
</script>
</BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

display&position 转载：On having layout

CSS样式表 中的 表格斜线

评论 (0) All

CSS样式表中的表格斜线