4

when I change the page direction to rtl the table margins is go incorrect,as in this picture enter image description here

but when I only remove the dir attribute from the page every thing is go correct , as in enter image description here

CSS

table,td,tr {
    border: 2px solid black;
    padding:0px;
}

HTML

<body>
    <table>
        <tr> <td></td><td></td> </tr>
        <tr> <td></td><td></td> </tr>
    </table>
</body>

this happens in firefox but on chrome the table is correct on both directions!

how to solve this issue?

EDIT:

I just reported a new bug to Bugzilla today(after 3 years from the question :D), here is the link https://bugzilla.mozilla.org/show_bug.cgi?id=1580346

Accountant م
  • 6,975
  • 3
  • 41
  • 61
  • 1
    Interesting... it also happens with the CSS `direction:rtl` property. – TheThirdMan Aug 07 '16 at 16:23
  • 3
    `This happens in firefox but on chrome the table is correct on both directions!` - Then that is most likely a bug and should be reported to the Firefox bug tracker. – Siguza Aug 07 '16 at 16:24
  • 1
    I've tested, and it only started to go wrong in Firefox v41. Older versions are OK. – Mr Lister Aug 08 '16 at 19:50

1 Answers1

2

As the comments say, it IS a bug.

However.

In reality there is no need to give border properties to tr elements. In fact, there's hardly any need to give any properties to tr elements whatsoever, except in very specialised situations.
So, you can remove the ,tr from the CSS selector.
If you do, nothing will change for the worse - the table will still look the same in LTR mode. But it will also look OK in RTL mode. This, therefore, is the solution to your problem.

table,td {
  border: 2px solid black;
  padding: 0px;
}
<body dir="rtl">
  <table>
    <tr> <td>test</td><td>test</td> </tr>
    <tr> <td>test</td><td>test</td> </tr>
  </table>
</body>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150