类似于Excel中的表格斜线，在制做页面表格的时候可以用css来搞定。这是我们想看到的效果：

其实原理很简单，就是利用了css的“钩子”钩往一个height&width=0的容器并设置其border.然后用定位放置头文字。值得注意的有两点：

• 斜角div的height和weight不可以相差太大，否则斜线就会产生锯齿。
• 斜角div是相对定位的，这样一来才可以设置内部元素的定位属性。

xhtml代码如下：

<table>
<tr class=”blue”>
<th id=”head” class=”firstrow”>

<div><span>Person</span><strong>property</strong></div>

</th><th>name</th><th>sex</th><th>age</th>
</tr>
<tr class=”white”>
<td class=”firstrow”></td><td>kily</td><td>male</td><td>20</td>
</tr>
<tr class=”blue”>
<td class=”firstrow”></td><td>keelii</td><td>female</td><td>19</td>
</tr>
<tr class=”white”>
<td class=”firstrow”></td><td>zhou</td><td>male</td><td>20</td>
</tr>
</table>

css代码如下：

*{ margin:0; padding:0;}
table{ border:2px solid #00F; margin:10px auto;}
.firstrow{ width:110px;}
th,td{ width:100px; height:40px;text-align:center;vertical-align:middle;}/*设置单元格基本样式*/
.blue{ background:#3FF;}    /*修饰表格*/
.white{ background:#eee;}    /*修饰表格*/
#head{ width:110px; background:#66F; color:#fff; margin:0; padding:0; }        /*第一列110px*/
#head div{ width:0px; height:0px; border-bottom:40px solid #609; border-right:110px solid #66f; position:relative;}    /*定义斜角div,下border=斜角div的高，右border=斜角div的宽，并设置相对定位，目地是为了定位斜角div内的文字*/
#head div span{ position:absolute; top:0; right:2px; }    /*斜角div内部的文字样式及其定位*/
strong{ position:absolute; bottom:2px; left:2px;  }        /*斜角div内部的文字样式及其定位*/