12

 

<!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>表格对角线</title>
<style type=”text/css”>
* {padding:0;margin:0;}

.container{ width:960px; margin:100px auto 0px;}
caption {font-size:14px;font-weight:bold;}
table {border-collapse:collapse;border:1px #525152 solid;margin:0 auto;}
th, td {border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;}
th {line-height:45px;}
/*模拟对角线*/
.out {width:0px;height:0px;position:relative;}
b {font-style:normal;display:block;position:absolute;top:-33px;left:124px;width:77px;}
em {font-style:normal;display:block;position:absolute;top:-12px;left:0px;width:100px;}
span.line{ display:block; width:206px; height:1px; background:#000;-webkit-transform:rotate(12deg);-ms-transform:rotate(12deg); -moz-transform:rotate(12deg); transform:rotate(12deg); position:absolute; top:0px; left:-3px;}

</style>
</head>
<body>
<div class=”container”>
<table cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr>
<th style=”width:200px;”> <div class=”out”> <b>停车场类型</b><span class=”line”></span> <em>行政区-交通小区</em> </div></th>
<th>居民小区</th>
<th>公共建筑</th>
<th>单位大院</th>
<th>路侧停车</th>
<th>路外公共</th>
</tr>
</table>
</div>
</body>
</html>