CSS顯示：表格單元格，表格內有div

Question

如果帶有樣式表行的div位於表單元格內，如何使display：table-cell樣式起作用（或類似的替代方法）？ （請參閱鏈接）

http://jsfiddle.net/ELKQg/460/

我希望container1 div的行為類似於container2。

代碼：（如果鏈接變得無法訪問）

HTML：

<div id="container1" class="container">
    <table>
        <tr>
            <td>
    <div class="row">
        <div class="cell">aaaa</div>
        <div class="cell expand">b</div>
        <div class="cell">c</div>
    </div>
            </td>
        </tr>
        <tr>
            <td>
    <div class="row">
        <div class="cell">d</div>
        <div class="cell expand">eeeee</div>
        <div class="cell">f</div>
    </div>
            </td>
        </tr>
    </table>
</div>

<div id="container2" class="container">
    <div class="row">
        <div class="cell">aaaa</div>
        <div class="cell expand">b</div>
        <div class="cell">c</div>
    </div>
    <div class="row">
        <div class="cell">d</div>
        <div class="cell expand">eeeee</div>
        <div class="cell">f</div>
    </div>
</div>

CSS：

.container{width: 500px;overflow:hidden; /* instead of clearfix div */}  
 div { border:1px solid;padding: 1px;}    
.row {display:table-row;}
.cell {display:table-cell;}
.expand{overflow:hidden;width:100%;}

Answer 1

1. 在.container1包含<div>的額外<table>必須具有width: 100%
2. display: table-cell元素不一定需要包含display: table-row ，只要父元素是display: table 。 將.row設置為該.row （理想情況下，您將對其重命名，因為該規則已不再有意義）

修復並分叉了您的演示： http : //jsfiddle.net/barney/ahMg8/

Answer 2

在使用display:table-cell之前，將display: table用作父表

Answer 3

在tr內使用td代替div：

<div id="container1" class="container">
    <table>
        <tr>
            <td class="cell">aaaa</td>
            <td class="cell expand">b</td>
            <td class="cell">c</td>
        </tr>
        <tr>
            <td class="cell">d</div>
            <td class="cell expand">eeeee</td>
            <td class="cell">f</td>
        </tr>
    </table>
</div>

工作提琴