創建一個表僅使用CSS

Question

我需要一個表的佈局，看起來像下面這樣：

小區中的一個（行跨度2）

小區二，三（旁邊小區的一個和對方）

單元格4（單元格2和3下方的單元格2）

但是我遇到的問題是它只需要使用CSS完成，我根本不能在代碼中使用任何表格元素。

如果單元格2,3和4爲空，單元格1還需要拉伸至100％的寬度。

我正在Joomla的Artisteer 4模板上工作，並且搜索了所有內容，但無法找到工作解決方案。

我的代碼如下：

<div class="prof-layout-wrapper"> 
    <div class="prof-content-layout"> 
     <div class="prof-content-layout-row"> 
     <div class="prof-layout-cell prof-content"> 
<?php 
echo $view->position('banner2', 'prof-nostyle'); 
if ($view->containsModules('breadcrumb')) 
echo artxPost($view->position('breadcrumb')); 
echo $view->positions(array('user1' => 50, 'user2' => 50), 'prof-article'); 
echo $view->position('banner3', 'prof-nostyle'); 
echo artxPost(array('content' => '<jdoc:include type="message" />', 'classes' => ' prof-m essages')); 
echo '<jdoc:include type="component" />'; 
echo $view->position('banner4', 'prof-nostyle'); 
echo $view->positions(array('user4' => 50, 'user5' => 50), 'prof-article'); 
echo $view->position('banner5', 'prof-nostyle');?> 
</div> 
<?php if ($view->containsModules('left')) : ?> 
    <div class="prof-layout-cell prof-sidebar1"> 
    <?php echo $view->position('left', 'prof-block'); ?> 
    </div> 
    <?php endif; ?> 
<?php if ($view->containsModules('right')) : ?> 
    <div class="prof-layout-cell prof-sidebar2"> 
     <?php echo $view->position('right', 'prof-block'); ?> 
    </div> 
     <?php endif; ?> 
     </div> 
    </div> 
    </div> 

的CSS是：

.prof-layout-wrapper 
{ 
    position: relative; 
    margin: 0 auto 0 auto; 
    z-index: auto !important; 
} 

.prof-content-layout 
{ 
    display: table; 
    width: 100%; 
    table-layout: fixed;  
    float: left; 
} 

.prof-content-layout-row 
{ 
    display: table-row; 
} 

.prof-layout-cell 
{ 
    display: table-cell; 
    vertical-align: top; 
} 

對於我的生活，我不能讓小區4跨越翻過不破壞整個佈局。

請幫忙！

（我希望這是一個足夠好的解釋）

Answer 1

當然！

Demo Fiddle

HTML

<div class='table'> 
    <div class='row'> 
     <div class='cell'>cell1</div> 
     <div class='cell'> 
      <div class='table'> 
       <div class='row'> 
        <div class='cell'>cell2</div> 
        <div class='cell'>cell3</div> 
       </div> 
       <div class='caption'>cell4</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

html, body { 
    width:100%; 
} 
.table { 
    display:table; 
    width:100%; 
} 
.row { 
    display:table-row; 
} 
.cell { 
    display:table-cell; 
    border:1px solid grey; 
} 
.caption { 
    display:table-caption; 
    caption-side:bottom; 
    border:1px solid grey; 
} 

如果你想自動膨脹/收縮的功能，你可以調整略有代碼，a la this fiddle