Firefox скрывает пустые ячейки таблицы

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

CSS-свойство empty-cells должно быть на table, а не на td элементах. Также обратите внимание, что поддержка глючит .

Answer 2

Другое решение: таблица-макет: исправлено;

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

Работает во всех браузерах.http://www.quirksmode.org/css/tables.html

Answer 3

Вы можете поместить пустое пространство в ячейки с помощью:

&nbsp

Но большинство сказали бы, чтобы не использовать таблицы для разметки страницы: Не использовать таблицы для макета

Answer 4

вы можете использовать min-width свойство CSS, которое поддерживает FF.