斜线表格
2020-12-21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
*{padding:0;margin:0;}
table{ border-collapse:collapse;border:1px #E5E5E5 solid;margin:0 auto;margin-top:100px;}
th{border:1px #E5E5E5 solid;text-align:center;font-size:12px;line-height:30px;background:#D6D3D6;}
td{border:1px #E5E5E5 solid;text-align:center;font-size:12px;line-height:30px;background:#FFF;}
.col{background-color:#F6F6F6}
.out{
border-top:40px #D6D3D6 solid;
width:0px;
height:0px;
border-left:80px #F6F6F6 solid;
position:relative;
}
b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}
.apply{
background-color:#D0BCF9;
}
.finish{
background-color:#BCD8F9;
}
</style>
</head>
<body>
<table>
<tr>
<th style="width:80px;">
<div class="out">
<b>日期</b>
<em>人员</em>
</div>
</th>
<th style="width:60px;">1</th>
<th style="width:60px;">2</th>
<th style="width:60px;">3</th>
<th style="width:60px;">4</th>
<th style="width:60px;">5</th>
<th style="width:60px;">6</th>
<th style="width:60px;">7</th>
<th style="width:60px;">8</th>
<th style="width:60px;">9</th>
<th style="width:60px;">10</th>
</tr>
<tr style="height:100px;">
<td class="col">开发1</td>
<td><div class="apply">task1</div><div> </div></td>
<td><div class="apply"> </div><div class="finish">task1</div></td>
<td><div class="apply"> </div><div class="finish"> </div></td>
<td><div class="apply"> </div><div class="finish"> </div></td>
<td><div class="apply"> </div><div class="finish"> </div></td>
<td><div class=""> </div><div class="finish"> </div></td>
<td><div class=""> </div><div class="finish"> </div></td>
<td><div class=""> </div><div class="finish"> </div></td>
<td><div class=""> </div><div class="finish"> </div></td>
<td><div class=""> </div><div class=""> </div></td>
</tr>
<tr>
<td class="col">开发2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div class="finish">task2</div></td>
<td><div class="finish"> </div></td>
<td><div class="finish"> </div></td>
<td></td>
</tr>
<tr>
<td class="col">开发3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="col">开发4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果
