Styling inconsistency on Chrome and Firefox
<p>I have a table, that for one of its cells I am using the rule</p>

<pre><code>border-right: 3px solid #000 !important;
</code></pre>

<p>It works fine on Chrome but in Firefox the border is invisible. I say invisible because if I deactivate the rule I can see the cells' contents move slightly.</p>

<pre><code>-moz-box-sizing: border-box; 
</code></pre>

<p>Did not help in any way as far as I can see. </p>

<p>So if you were to run <a href="https://jsfiddle.net/sfodcjkz/4/" rel="nofollow noreferrer">this</a> small example in Chrome, it would look fine. In Firefox you can spot some errors though (be sure to view at a wider width to see the error)</p>

<p>I have tried various other suggested option with no good results. The one closer to solving the issue was removing <code>border-collapse</code> altogether, but that makes all borders visible as can be seen from the image below:</p>

<p><a href="https://i.stack.imgur.com/g2oPv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g2oPv.png" alt="enter image description here"></a> </p>

<p>Is this common for Firefox, and how can I overcome the issue. </p>