CSS div表格造型

Question

我想用CSS來設計一個div表格。這裏是我的示例工作代碼：

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="table-row"> 
      <div class="mycolumn" id="sidebar"> 
       Sidebar area 
      </div> 
      <div class="mycolumn" id="content"> 
       <p>content area</p> 
       <p>some more content</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#sidebar{ 
    width: 250px; 
    background-color: #eaeff1; 
} 
.table-row { 
    display: table-row; 
} 
.mycolumn { 
    display: table-cell; 
    padding: 15px; 
} 
#content { 
    background-color:#00eff0; 
    /* width:100%; */ 
} 
div { 
    outline: 1px solid #3a87ad; 
} 

http://jsfiddle.net/gbovzuqm/

我怎樣才能獲得內容區域div來掩蓋背後所有剩餘空間？我已經嘗試過應用width:100%，但它會擠壓側欄區域。

我如何使用CSS樣式來做到這一點？

Answer 1

無需使用display:table-row使用本

.table-row { 
    display: table; 
    width: 100%; 
} 

updated jsFiddle Code

Answer 2

中序糾正這一點，你可以像這樣

.table-row { 
     display: table; //replace display:table-row; 
     width: 100%; 
    } 

Answer 3

如果已設置display: table-cell，它不僅使感也要設定display: table-row和display: table爲了模擬一張桌子給它的祖先。

Click here to see updated fiddle

這個問題可能是純學術性的，但只是一些事情要考慮，如果你真的這樣做在現實生活中的生產系統正在：爲什麼要使用<div>來模擬表格和單元格當你可以簡單地使用<table>,<tr>和<td>？

此外，根據單元格數據中使用的單詞，聽起來您正在使用<div>作爲表格的僞裝以進行頁面佈局。請不要在現實生活中這樣做。出於合理原因討厭佈局桌子;使用其他HTML標籤僞裝他們是一件更糟糕的事情。