会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
learning for ever
keep up,don't stop
博客园
首页
新随笔
联系
管理
css+div 布局(1)- css+div实现table布局
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
>
接下来还需要实现:
排序
拖拽
拉伸
posted on
2008-04-12 07:02
Agan@CN
阅读(
17064
) 评论(
51
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部