[转]css+div 布局(1)- css+div实现table布局
2008-04-12 10:29
706 查看
css+div实现table布局
css代码
<style>
.row
</style>
对每个cell设置border-left,border-top,这样的单元格拼成行,仅仅缺少最后一格右边框和最后一行的底边框,这些就需要特殊处理,所以另外定义两个class:lastcell和lastrow来处理,最后拼出来的table边框就不会有重叠。
class:grid_rw1clr,grid_rw2clr实现交替色
Css Table效果
.table
.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;
}
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>
接下来还需要实现:
排序
拖拽
拉升
css代码
<style>
.row
</style>
对每个cell设置border-left,border-top,这样的单元格拼成行,仅仅缺少最后一格右边框和最后一行的底边框,这些就需要特殊处理,所以另外定义两个class:lastcell和lastrow来处理,最后拼出来的table边框就不会有重叠。
class:grid_rw1clr,grid_rw2clr实现交替色
Css Table效果
.table
.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;
}
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>
接下来还需要实现:
排序
拖拽
拉升
相关文章推荐
- css+div 布局(1)- css+div实现table布局
- HTML,使用div+css实现自适应table布局
- div+css table布局实现代码
- 使用DIV+CSS实现Table布局
- div+css实现table布局
- HTML CSS + DIV实现局部布局
- DIV+CSS+JS实现的可以随意拖动的网页布局
- 利用div+css实现几种经典布局的详解,样式以及代码!
- css+div实现简单布局
- 以div代替frameset,用css实现仿框架布局
- 怎么使用3个div实现这个布局,css怎么写
- 使用Div+css实现表格布局
- HTML CSS + DIV实现整体布局
- DIV+CSS基础教程:使用Table布局是不明智的
- DIV+CSS布局和TABLE布局的区别
- div+CSS实现页面的布局要点记录
- div+css实现两列table效果示例
- DIV+CSS实现网页布局
- CSS在页面布局中实现div垂直居中的方法总结(转)
- div+css实现window xp桌面图标布局(至上而下从左往右)