Weird table rendering in Firefox

Question

I use Firefox 26.0 on Windows 8.1. The simple tabular html+css layout is rendered strangely on different zoom levels. 100% zoom in Firefox is ok. IE and Chrome render the document properly. Changing html code to regular table/tr/td doesn't help. Is it a bug in the Firefox on Windows 8.1 or something wrong with the layout? HTML code ```

``` CSS code ``` #board { display: table; border-collapse: collapse; } .row { display: table-row; } .cell { border: 1px solid; display: table-cell; height: 1em; width: 1em; } ``` Results: 100% -2 zoom out: 100% -3 zoom out: 100% +1 zoom in: 100% +3 zoom in:

Accepted Answer

From Bugzilla :

Bug 410959 - [BC] Table cell border widths render incorrectly at various zoom levels

That's a bug and no one has yet solved it.

Also, if you are having a tabular data, use `table` and not `div`

And the solution for this is to use `border-collapse: separate;`

```
#board {
    display: table;
    border-collapse: separate;
}
```

Demo (Your buggy demo on zoom in and out using `border-collapse: collapse;`)

Demo

Weird table rendering in Firefox

Solution

Problem