为什么没有显式宽度的表格单元格样式元素不会拉伸以填充表格/表格行样式父项的剩余宽度？答案

【问题标题】：Why doesn't a table-cell styled element without explicit width stretch to fill the remaining width of a table/table-row styled parent?为什么没有显式宽度的表格单元格样式元素不会拉伸以填充表格/表格行样式父项的剩余宽度？
【发布时间】：2013-04-18 17:21:53
【问题描述】：

有人能解释一下为什么下面的两个表格布局不一样（具体来说，为什么第二个“表格单元格”div 没有拉伸以占据“表格”父 div 的其余宽度，如它在真实的表中）？

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head></head>
    <body>
        <div style="width: 100%; border: 1px solid black;">
            <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
            <div style="display: table-cell; border: 1px solid red;">.</div>
            <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
        </div>
        <table style="width: 100%; border: 1px solid black; border-spacing: 0;">
            <tr>
                <td style="width: 20px; border: 1px solid red;">.</td>
                <td style="border: 1px solid red;">.</td>
                <td style="width: 20px; border: 1px solid red;">.</td>
            </tr>
        </table>
    </body>
</html>

编辑：如果您尝试将图像设置为表格单元格，结果会出现一些意外行为：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
      <style type="text/css"><![CDATA[
* {border: 1px solid black;}
table, .table, .row {
    width: 100%;
}
.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
img {
    height: 21px;
    width: 21px;
}
    ]]></style>
  </head>
  <body>
    <div class="table">
      <div class="row">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
        <div class="cell">
        </div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
      </div>
    </div>
  </body>
</html>

第二个单元格样式的 div 不会一直水平拉伸以填充表格宽度的其余部分。如果您向其中添加内容，它会逐渐添加。很奇怪。

【问题讨论】：

因为你没有给你的父 div 一个display:table 规则？
在这个测试用例中为真，哎呀！我正在用实际问题简化我的源代码，似乎我无意中删除了该规则并最终过度简化了问题代码！正在处理该问题的更新演示...
是的，图像不能很好地转换为表格单元格元素。就其价值而言，表格和 Flexbox 模块之间有很多重叠之处。因为只需要修改父元素的显示类型，它就可以很好地处理图像（请参阅：codepen.io/cimmanon/pen/Azone）。

标签： html css css-tables

【解决方案1】：

除非 table-cell 元素的父元素是 table-row 元素（并且其父元素是 table 元素）或 table 元素，否则会为您插入匿名 table 和 table-row 元素。无法设置匿名元素的样式。

如果您希望表格单元格元素占据整个可用宽度，则需要创建一个明确的表格元素来包含它们以用于样式设置。

http://tinker.io/29b92

    <div style="width: 100%; display: table; border: 1px solid black;">
        <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
        <div style="display: table-cell; border: 1px solid red;">.</div>
        <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
    </div>

【讨论】：

【解决方案2】：

原来答案是“图像不能可靠地设置为表格单元格”，但我错误地简化了我的初始测试用例。谢谢大家！

【讨论】：

【解决方案3】：

如果您希望其中一行扩展到相同的宽度，您应该使用其他表格中的表格。

另外，如果你的父表是100%，你的子表也不可能是100%，你试过98%吗？

在和外部 CSS 文件中设置 HTML 样式，以防止每行重复您的子句。

如果这不起作用，请告诉我，我会继续寻找您可以尝试的更多选项。

【讨论】：

它可以是其父级宽度的 100%，除非它被边框和/或填充阻挡。
是的，虽然在示例中每次都有一个 1px 的边框。那可能会给你带来问题。尽管 cimanon 已经对这个问题给出了更有效的答案。谢谢！