Question

我写了以下HTML：

<table width="900px" style=" border-collapse:separate;">
        <tr>
        <td width="33%"  style=" empty-cells:show; background-image:url('box1.png'); background-repeat:no-repeat; display:inline; margin-left:auto; position:static; margin-right:auto; height:300px; ">
            &nbsp;
        </td>
        <td width="33%" style="empty-cells:show;background-image:url('box2.png'); background-repeat:no-repeat; display:inline; margin-left:auto; position:static; margin-right:auto; height:300px; ">
        &nbsp;
        </td>
        <td width="33%" style="empty-cells:show;background-image:url('box3.png'); background-repeat:no-repeat; display:inline; margin-left:auto; position:static; margin-right:auto; height:300px; ">
         &nbsp;
        </td>
        </tr>
 </table>

IE9和chrome显示所有<td>，尽管它们是空的。但Firefox没有。要解决这个问题需要做些什么？

Answer 1

empty-cells CSS属性应位于table，而不是td元素。另请注意，support is buggy。

Answer 2

您可以使用FF支持的min-width CSS属性。

Answer 3

您可以在单元格中添加空格：

&nbsp

但大多数人会说，不要使用表格进行页面布局： Don't Use Tables for Layout

Answer 4

另一种解决方案：table-layout：fixed;

<table width="900px" style="table-layout: fixed; border-collapse: separate;">

适用于所有浏览器。 http://www.quirksmode.org/css/tables.html

Firefox隐藏了空表格单元格

4 个答案: