Question

有人可以解释为什么下面的两个表格布局不一样（具体来说，为什么第二个'table-cell'div不会拉伸以占据'table'父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不会一直拉伸以填充表格的其余部分。如果你向它添加内容，它会逐渐增加。怪异。

Answer 1

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

如果希望table-cell元素占用整个可用宽度，则需要创建一个显式表元素以包含它们以用于样式目的。

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>

Answer 2

原来答案是“图像不能像桌子一样可靠地设置样式”，但我错误地简化了我的初始测试用例。谢谢大家！

Answer 3

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

另外，如果您的父表是100％，那么您的子表也不能100％，您尝试过98％吗？

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

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

为什么没有显式宽度拉伸的表单元格样式元素不能填充表/表格样式父级的剩余宽度？

3 个答案: