7

有人可以解释为什么下面的两个表格布局不一样（具体来说，为什么第二个“表格单元格”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 不会一直水平拉伸以填充表格宽度的其余部分。如果您向其中添加内容，它会逐渐添加。诡异的。

4

3 回答 3

10

除非 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>
于 2013-04-17T17:17:07.083 回答
0

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

于 2013-04-18T09:21:53.787 回答
-1

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

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

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

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

于 2013-04-17T17:19:21.197 回答