title: Table td input field border issue in firefox
body: <p><a href="http://jsfiddle.net/4zx1Ldpg/" rel="nofollow noreferrer">Demo</a></p>
  
  <p><img src="https://i.stack.imgur.com/6DQO2.png" alt="enter image description here"></p>
  
  <p>Click on any cell in the table in the JSFiddle in firefox and you'll see that the bottom and right borders are hidden. Is there an elegant way to get around this?</p>
  
  <p>I have tried a couple of things but they didn't work out for me:</p>
  
  <ul>
  <li>Add <code>padding-right: 3px</code> in order to view the right side of the blue border and <code>border-right: 3px</code> to compensate for the padding that was just added in. This causes precedence issues between border and background-color.</li>
  <li>On <code>td input:focus</code>, reduce the width and height of the input field by a couple pixels. Unfortunately, I need the width to be set to 100% since I have resizable columns (excluded from the JSFiddle for brevity).</li>
  </ul>