css+div 布局（1）- css+div实现table布局

css+div实现table布局

css代码

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

接下来还需要实现：

• 排序
• 拖拽
• 拉伸