如果带有样式表行的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%;}

最佳答案

<table>中包含您的<div>的额外.container1必须具有width: 100%
只要父级为display: table-celldisplay: table-row元素不一定需要包含display: table。将.row设置为该值(理想情况下,您将对其重命名,因为该规则不再有意义)


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

关于css - CSS显示:表格单元格,表格内有div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15133803/

10-13 01:50
查看更多