css+div 布局（1）- css+div實現table布局

css+div實現table布局

css代碼

<style>
.table/**//*div table container*/
{



/**//*width:770px;*/
}
.row div/**//*div row cell*/
{
display:inline;
width:240px;
border-top:1px solid  #C1BBAB;
border-left:1px solid #C1BBAB;
}
.header div/**//*div header cell*/
{
display:inline;
width:240px;
border-top:1px solid  #C1BBAB;
border-left:1px solid #C1BBAB;
text-align:center;
background-color:#E0DDD5;
}
.lastcell/**//*last cell*/
{
border-right:1px solid #C1BBAB;
}
.header/**//*div table hearder*/
{
font:bold;
color:navy;
}
.grid_rw1clr div/**//*cell in grid_rw1clr*/
{
    background-color: #FFFFFF;
}
.grid_rw2clr div/**//*cell in grid_rw1clr*/
{
    background-color: #F9F8F6;
}
.row
{
font:normal 12px;
}
.lastrow div/**//*cell in last row*/
{
border-bottom:1px solid #C1BBAB;
}
</style>

對每個cell設定border-left，border-top,這樣的儲存格拼成行，僅僅缺少最後一格右邊框和最後一行的底邊框，這些就需要特殊處理，所以另外定義兩個class：lastcell和lastrow來處理，最後拼出來的table邊框就不會有重疊。
class：grid_rw1clr，grid_rw2clr實現交替色

Css Table效果
header(1,1)header(1,2)row(1,1)row(1,2)row(2,1)row(2,2)

Html代碼 <div class="table">
  <div class="header"><div>header(1,1)</div><div class="lastcell">header(1,2)</div></div>
  <div class="row grid_rw1clr"><div>row(1,1)</div><div class="lastcell">row(1,2)</div></div>
  <div class="row grid_rw2clr lastrow"><div>row(2,1)</div><div class="lastcell">row(2,2)</div></div>
</div>

接下來還需要實現：

• 排序
• 拖拽
• 展開