css+div 布局（1）- css+div实现table布局_html/css_WEB-ITnose

css+div实现table布局

css代码

.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 >

header(1,1)

header(1,2)

row(1,1)

row(1,2)

row(2,1)

row(2,2)

 
   header( 1 , 1 ) div > header( 1 , 2 ) div > div >
   row( 1 , 1 ) div > row( 1 , 2 ) div > div >
   row( 2 , 1 ) div > row( 2 , 2 ) div > div >
div >