css模拟表格效果- 前端开发

模拟表格效果，在IE6,IE7,IE8,firefox,Opera下测试通过

虽然不推荐用这种方式来模拟表格,但是确实可以做到.
<!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 > DIV+CSS模拟表格效果 - by koyoz.com</ title >
< style type ="text/css" >
* {margin:0;padding:0}
#main {margin:100px 0 0 200px}
#main ul {width:520px;height:165px;list-style:none}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
</ style >
</ head >
< body >
< div id ="main" >
< ul >
< li > 11</ li >
< li > 11</ li >
< li > 11</ li >
< li > 11</ li >
< li class ="r" > 11</ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li class ="r" > 11</ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li class ="r" > 11</ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li class ="r" > 11</ li >
< li class ="b" > </ li >
< li class ="b" > </ li >
< li class ="b" > </ li >
< li class ="b" > </ li >
< li class ="b r" > 11</ li >
</ ul >
</ div >
</ body >
</ html >

css模拟表格效果