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%;
}

更新了jsFiddle代碼

Answer 2

為了糾正這個問題，你可以這樣做

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

Answer 3

如果已設置display: table-cell ，則還必須將display: table-row和display: table設置為其祖先，以模擬表。

點擊這里查看更新的小提琴

這個問題可能純粹是學術性的，但是如果您在現實生活的生產系統中確實要這樣做，則需要考慮一些事情：為什么當您只想使用<table>時，為什么要使用<div>模擬表和單元格？ <table> ， <tr>和<td> ？

同樣，從單元格數據中使用的單詞來看，聽起來好像您正在使用<div>作為表格的偽裝以便進行頁面布局。 請不要在現實生活中這樣做。 布局表很令人討厭； 使用其他HTML標簽偽裝它們是一件更糟糕的事情。