1

如果具有样式 table-row 的 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%;}
4

3 回答 3

1
  1. <table>包含你<div>的 s的额外内容.container1需要有width: 100%
  2. display: table-cell元素不一定需要包含display: table-row，只要父元素是display: table. 设置.row为那个（理想情况下你会重新命名它，因为规则不再有意义）

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

于 2013-02-28T11:51:39.023 回答
0

使用display: table前用于父表display:table-cell

于 2013-02-28T11:22:54.447 回答
0

在里面使用td's 而不是 divs tr：

<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>

工作小提琴

于 2013-02-28T11:24:19.313 回答