Question

如何进行显示：如果带有样式表行的div在表格单元格内，则表格单元格样式（或类似的替代）（见链接）

我希望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

包含<table> <div> .container1的额外width: 100%需要display: table-cell

display: table-row

display: table元素就不一定需要包含.row。将{{1}}设置为该值（理想情况下，您可以重新命名，因为规则不再有意义）

修正并分叉您的演示： http://jsfiddle.net/barney/ahMg8/

Answer 2

在使用display: table

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

Answer 3

使用td代替tr内的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>

Working fiddle

CSS显示：表格内有div的表格单元格

3 个答案: