css+div レイアウト (1) - css+div はテーブル Layout_html/css_WEB-ITnose を実装します

css+div实现table布局

css代码

<スタイル＞
.table /**/ /*div テーブル コンテナ*/
{



/**//*幅:770px;*/
}
.row div /**/ /*div 行 セル*/
{
display:inline;
幅:240ピクセル;
border-top:1px solid #C1BBAB;
border-left:1px solid #C1BBAB;
}
.header div /**/ /*divヘッダーセル*/
{
display:inline;
幅:240ピクセル;
border-top:1px solid #C1BBAB;
border-left:1px solid #C1BBAB;
text-align:center;
背景色:#E0DDD5;
}
.lastcell /**/ /*最後のセル*/
{
border-right:1px solid #C1BBAB;
}
.header /**/ /*div テーブル リスナー*/
{
font:bold;
色:ネイビー;
}
.grid_rw1clr div /**/ /*grid_rw1clr のセル*/
{
background-color: #FFFFFF;
}
.grid_rw2clr div /**/ /*grid_rw1clr のセル*/
{
背景色: #F9F8F6;
}
.row
{
font:normal 12px;
}
.lastrow div /**/ /*最後の行のセル*/
{
border-bottom:1px solid #C1BBAB;
}

各セルは、border-left、border-top、このような元の形式で実行され、最後の右端と最後の行の下端が最小限に抑えられます。これらには特別な処理が必要なので、2 つのクラス：lastcell と
クラス:grid_rw1clr、grid_rw2clr の置換色

CSS テーブル効果

header(1,1)

ヘッダー(1,2)

row(1,1)

row(1,2)

row(2,1)

row(2,2)

Html代コード < div クラス = " テーブル " >
< div class = " ヘッダー " ><ディビジョン > header( 1 , 1 ) < div class = " lastcell " > header( 1 , 2 )

< div class = " row grid_rw1clr " ><ディビジョン > row( 1 , 1 ) < div class = " lastcell " > row( 1 , 2 )
< div class = " row grid_rw2clr lastrow " ><ディビジョン > row( 2 , 1 ) < div class = " lastcell " > row( 2 , 2 )


次来还必要实现：

排序 拖拽 拉伸