html css div实现word表格效果,DIV+CSS实现表格功能（不支持IE6、IE7）

DIV+CSS实现表格功能(不支持IE6、IE7)

有个简单的方法，使用display:table，display:table-row，display:table-cell就可以实现，而且支持元素的垂直居中对齐，关联伸缩(高度小的容器会自适应那些高度相对较高的)，但IE6/7不支持此属性。

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如：float, position:absolute，所以在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

实例：

DIV+CSS实现表格功能(不支持IE6、IE7)

• 编号
• 内容
• 日期

• 001
• 内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three
• 2012-12-3 14:02:09

• 001
• 内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three

1.dispaly:table;作为块级元素的表格table显示，也就是将他作为一个表格

2.border-collapse:separate;

http://www.w3school.com.cn/css/pr_tab_border-collapse.asp

3.display:table-row;作为表格行tr显示

4.display:table-cell;作为表格单元格td显示

5.然后定义宽度

6.border-spacing:0px;设置单元格间距

http://www.w3school.com.cn/css/pr_tab_border-spacing.asp

参考：