Just ran into this issue and came to a css only solution:
just add background-clip: padding-box
to your td
element.
See this article for more information: https://developer.mozilla.org/en-US/docs/CSS/background-clip
More Related Contents:
- SVG data image not working as a background-image in a pseudo element
- Any way to declare a size/partial border to a box?
- How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
- CSS @font-face not working with Firefox, but working with Chrome and IE
- Control the dashed border stroke length and distance between strokes
- :not() selector not behaving the same between Safari and Chrome/Firefox
- CSS: Margin-top when parent’s got no border
- How does border-image work with linear-gradient?
- Should I use ‘border: none’ or ‘border: 0’?
- Custom Cursor Image CSS
- 3D CSS transform, jagged edges in Firefox
- Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
- How to hide scrollbar in Firefox?
- How can I zoom an HTML element in Firefox and Opera?
- How do I Make Firefox Print a Background-Color Style?
- Border within border CSS
- How to reset / remove chrome’s input highlighting / focus border? [duplicate]
- Removing the image border in Chrome/IE9
- What does @-moz-document url-prefix() do?
- CSS “outline” different behavior behavior on Webkit & Gecko
- Creating space between an element and its border
- text flowing out of div
- Combining border-top,border-right,border-left,border-bottom in CSS
- Firefox sets wrong caret position contentEditable with :before
- Ellipsis in flexbox container [duplicate]
- filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera
- Drawing border colors during a CSS transition
- input type=”image” shows unwanted border in Chrome and broken link in IE7
- Using CSS to make table’s outer border color different from cells’ border color
- :nth-letter pseudo-element is not working [closed]