Firefox hides empty table cells

I've written following 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 and c开发者_Python百科hrome show all the <td> s though they are empty. But Firefox does not. What has to be done to solve this problem?

---

The empty-cells CSS property should be on the table, not the td elements. Also note, support is buggy.

---

you could use the min-width CSS property which FF supports.

---

You can put a blank space in the cells with:

&nbsp

But most would say, not to use tables for page layout: Don't Use Tables for Layout

---

Another solution: table-layout: fixed;

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

Works in all browsers. http://www.quirksmode.org/css/tables.html