CSS 显示：表格单元格，表格内有 div答案

【问题标题】：CSS display:table-cell with div inside tableCSS 显示：表格单元格，表格内有 div
【发布时间】：2013-02-14 13:00:03
【问题描述】：

如果具有表格行样式的 div 在表格单元格内，如何使 display:table-cell 样式有效（或看起来相似的替代方案）？（见链接）

我希望 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%;}

【问题讨论】：

对不起，我的错，我忘记了桌子 { width:100%; } 这里是正确的：jsfiddle.net/ELKQg/463

标签： css html

【解决方案1】：

在使用display:table-cell之前对父表使用display: table

【讨论】：

我已在主帖评论中添加了已编辑的内容，它似乎不起作用，我做对了吗？

【解决方案2】：

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

【讨论】：

抱歉，我不能：表格来自 GWT 垂直面板，div 来自焦点面板，我无法更改它们。

【解决方案3】：

在.container1 中包含<div>s 的额外<table> 需要有width: 100%
display: table-cell 元素不一定需要包含 display: table-row，只要父元素是 display: table。将.row 设置为该值（理想情况下，您可以重命名它，因为该规则不再有意义）

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

【讨论】：

你的叉子不工作，甚至 container2 失去了单元格“表格样式”（每个单元格的宽度与最大单元格的宽度相同，尽管它的内容）
两个表在 Firefox 和 Chrome 上看起来相同。无法检查 IE，因为它在我工作的地方有一些奇怪的限制。我所做的代码更改不会触及.container2。
你改变了 .row { display:table-row; } 到 .row { 显示：表；这样它就失去了单元格“对齐”......就像一个网格。在这里我看到你的代码imgh.us/Cattura2.png 应该是imgh.us/Cattura_1.png（第三和第四行）
对！我明白你在说什么。在这种情况下，您所追求的在纯 HTML + CSS 中是不可能的，因为您希望不同表中的行共享相同的列宽。这就是表的本质用途：使它们的直接行共享列。有时人们会使用 Javascript 使不同的表（和非表）匹配彼此的维度。这对您来说是一个有效的解决方案吗？
我害怕。作为最后一个资源，我将使用 javascript。谢谢你，至少现在我知道没有javascript就无法完成。现在我将尝试用一些基于 div 的容器替换 GWT VerticalPanel。