7

以下の2つのテーブルレイアウトが同じではない理由を誰かが説明できますか?実際のテーブル)?

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

2 番目のセル スタイルの div は、テーブルの残りの幅を埋めるために水平方向に完全に伸びません。それにコンテンツを追加すると、徐々にそうなります。変。

4

3 に答える 3