今天用ul li做个圆角表格，圆角用了背景图片。再次声明：数据输出型的表格不推荐使用div+css。测试浏览器：IE6\IE7\IE8\FF3.0\Opera 9.6
CSS
*{
margin:0px;
padding:0px;
}
body{
text-align:center;
font-family:"宋体"
}
#table{
margin:0 auto;
width:960px;
text-align:left;
}
li{
width:958;
*width:100%;
height:36px;
line-height:36px;
border:1px solid #c9dff7;
border-bottom:none;
list-style-type:none;
vertical-align:bottom;
}
li.title{
width:960px;
height:34px;
line-height:34px;
background:url(title.gif);
border:none;
font-size:13px;
font-weight:800;
color:#fff;
}
li.title span{
padding-left:20px;
}
li.bottom{
width:960px;
height:37px;
background:url(end.gif);
border:none;
}
li a{
float:left;
width:88px;
*width:89px;
height:36px;
overflow:hidden;
border-right:1px solid #c9dff7;
}
li a.left{
float:left;
width:67px;
*width:68px;
height:36px;
overflow:hidden;
background:#E3EFFC
}
li a.b_l{
width:68px;
*width:69px;
background:none;
}
li a.right{
border-right:none;
} |
XHTML
<div id="table">
<ul>
<li class="title"><span>蜗爱css--www.woaicss.com</span></li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li>
<a class="left" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
<li class="bottom">
<a class="left b_l" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a class="right" href=""></a>
</li>
</ul>
</div> |