怎么用div+css实现table功能
下面这个表格，如何把 <table width=500 后面的东西用CSS做好，这样每次生成表格的时候，只要在表格上应用这个CSS就可以了。即减少了代码，也易于统一表格形式。
<table width= "500 " border= "1 " cellspacing= "0 " cellpadding= "0 " bordercolordark= "#FFFFFF " bordercolorlight= "#677C7C ">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
[解决办法]
<style type= "text/css ">
<!--
.t {
border-collapse:collapse;
border:1px solid #677C7C;
border-width:1px 0 0 1px;
}
.t td {
border:1px solid #677C7C;
border-width:0 1px 1px 0;
}
-->
</style>
<table width= "500 " class= "t ">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
[解决办法]
<style type= "text/css ">
#bigdiv {
width:504px;
border-top:1px #666666 solid;
border-left:1px #666666 solid;
}
.classdiv {
width:125px;
border-right:1px #666666 solid;
border-bottom:1px #666666 solid;
float:left;
}
.fc {
clear:both;
}
</style>
<div id= "bigdiv ">
<div class= "classdiv "> 1111 </div>
<div class= "classdiv "> 1111 </div>
<div class= "classdiv "> 1111 </div>
<div class= "classdiv "> 1111 </div>
<div class= "classdiv "> 1111 </div>
<div class= "classdiv "> 1111 </div>
<div class= "classdiv "> 1111 </div>
<div class= "classdiv "> 1111 </div>
<div class= "fc "> </div>
</div>
也有不好的地方,还需要修改宽度像素值
还有,就此例必须每行都是4个单元格才可以显示这样的效果,否则就很难看了
关键是楼主要求边框是1px的效果,如果可以用2px的,就更方便了
