日期:2014-05-17  浏览次数:20766 次

怎么用div+css实现table功能
下面这个表格,如何把 <table   width=500 后面的东西用CSS做好,这样每次生成表格的时候,只要在表格上应用这个CSS就可以了。即减少了代码,也易于统一表格形式。      
    <table       width= "500 "       border= "1 "       cellspacing= "0 "       cellpadding= "0 "       bordercolordark= "#FFFFFF "       bordercolorlight= "#677C7C ">      
            <tr>      
                    <td> &nbsp; </td>      
                    <td> &nbsp; </td>      
                    <td> &nbsp; </td>      
                    <td> &nbsp; </td>      
            </tr>      
            <tr>      
                    <td> &nbsp; </td>      
                    <td> &nbsp; </td>      
                    <td> &nbsp; </td>      
                    <td> &nbsp; </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> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </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= "