DIV 与 TABLE 布局

 table{
  border-top:1px solid #6E7B8B;
  border-right:1px solid #6E7B8B;
  width:500px;
  
 }
 td{
  border-left:1px solid #6E7B8B;
  border-bottom:1px solid #6E7B8B;
  height:21px;
  width:200px;
 }

<table cellspacing="0" cellpadding="0">
<tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
</table>

==============================================

.table{
 display:table;
 border-top:1px solid #6E7B8B;
 border-right:1px solid #6E7B8B;
 width:500px;
 }
 .row {
 display:table-row;
 }
 .row div {
 display:table-cell;
 width:200px;
 height:21px;
 border-left:1px solid #6E7B8B;
 border-bottom:1px solid #6E7B8B;
 word-wrap:break-word;
 }

<div class="table">
    <div class="row">
        <div>1-1</div><div>1-2</div><div>1-3</div><div>1-4</div>
    </div>
    <div class="row">
        <div>2-1</div><div>2-2</div><div>2-3</div><div>2-4</div>
    </div>
    <div class="row">
        <div>3-1</div><div>3-2</div><div>3-3</div><div>3-4</div>
    </div>
</div>

效果如下:

 

posted @ 2013-02-15 15:12  Yu  阅读(308)  评论(3编辑  收藏  举报