Question

我有这段代码：

<style>
    .main-table {width: 80%;}
    .box, .placeholder-box {display:table-cell; width: 26.4%;}
</style>
</head>

<body>
<table class="main-table">
    <tr>
        <div class="box">
            <h1>Venue</h1>
        </div>

        <div class="box">
            <h1>Time</h1>
        </div>

        <div class="box">
            <h1>Registry & Gifts</h1>
        </div>
    </tr>

    <tr>
        <div class="box">
            <h1>Dress</h1>
        </div>

        <div class="placeholder-box">
            [Floral placeholder thing]
        </div>

        <div class="box">
            <h1>Contact</h1>
        </div>
    </tr>
</table>

Firefox会将div视为表格中dom中出现的所有内容，因此我的div没有表格布局。这似乎忽略了display:table-cell。

我做错了吗？ FF坏了吗？有没有比使用表格更好的方式在网格中进行布局？

Answer 1

According to xhtml.com，tr必须包含至少一个th或td。 Firefox可能仅允许th或td，并为您“修复”您的错误。

另外，你不能像这样布局HTML吗？：

.main-table {width: 80%;}
.box, .placeholder-box {display:table-cell; width: 26.4%;}

<div class="main-table">
    <div>
        <div class="box">...</div>
        <div class="box">...</div>
        <div class="box">...</div>
    </div>
</div>

这更符合display:table-cell的目的。

Firefox显示：表格单元格错误，或表格单元格如何工作？

1 个答案: