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标签元素了。

实例:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>DIV+CSS实现表格功能(不支持IE6、IE7)</title>
  <style type="text/css">
  <!--
  * {
   font:12px 宋体;
  }
  .ul_table {
   display:table;
   width:933px;
   border-left:#B0B9D1 solid 1px;
   border-bottom:#B0B9D1 solid 1px;
   padding:0;
  }
  .ul_table ul {
   display:table-row;
   list-style-type:none;
   margin:0;
   padding:0;
  }
  .ul_table ul li {
   display:table-cell;
   line-height:24px;
   border-right:#B0B9D1 solid 1px;
   border-top:#B0B9D1 solid 1px;
   margin:0;
   padding:5px;
  }
  .one {
   width:200px;
   text-align:center;
   vertical-align:middle;
  }
  .two {
   width:500px;
   word-wrap:break-word;
   overflow: hidden;
  }
  .three {
   width:200px;
   text-align:center;
  }
  .four {
   width:711px;
   word-wrap:break-word;
   overflow: hidden;
  }
  #border_0 {
   border-top-width:0px;
  }
  -->
  </style>
  </head>
 
 <body>
  <div class="ul_table">
    <ul>
      <li class="one">编号</li>
      <li class="two">内容</li>
      <li class="three">日期</li>
    </ul>
    <ul>
      <li class="one">001</li>
      <li class="two">内容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</li>
      <li class="three">2012-12-3 14:02:09</li>
    </ul>
  </div>
  <div class="ul_table">
    <ul>
      <li class="one" id="border_0">001</li>
      <li class="four" id="border_0">内容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</li>
    </ul>
  </div>
  </body>
  </html>
 

 

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

 

参考:

http://www.chinaz.com/design/2008/1017/41219.shtml

http://www.zhangxinxu.com/wordpress/?p=1187