'CSS box-shadow inset gap between border when collapsed border

I have a table with border-collapse: collapse set, and the result is an odd gap between the the box-shadow inset and the border, which gets bigger with bigger border widths. How do I avoid this weirdness? This is on Chrome, by the way.

HTML:

<table class="theTable">
  <tr>
    <td class="weirdGap">
      unexpected gap
      <br>
      unexpected gap
    </td>
  </tr>
</table>

CSS:

.theTable {
  border-collapse: collapse;

}

.weirdGap {
  box-shadow: inset 0 0 6px red;
  border: 5px solid blue;
}

Here's the jsFiddle http://jsfiddle.net/ukhgK/11/

htmlcss


Solution 1:[1]

The border-collapse property sets the table borders are collapsed into a single border or detached as in standard HTML. You can find more developer.mozilla.org/.../border-collapse how to use it with examples.

Solution 2:[2]

This problem still persists, so here’s a work-around that might work depending on your needs: Instead of border-collapse: collapse; create all borders of the table using box-shadow:

box-shadow:
    inset 1px 0 black,
    inset 0 1px black,
    1px 0 0 0 black,
    0 1px 0 0 black,
    1px 1xp 0 0 black;

This leads to the borders on the right on bottom protruding out from the cell’s box whereas the borders on the top and left stay within the box. With cell-spacing: 0, borders of neighboring boxes fall on-top of each other, creating a similar effect to border-collapse: collapse. You can now use additional box shadows to achieve the effects you want, just remember that you need to repeat all existing shadows you want to keep. (I.e. if you have box-shadow properties on the same cell from two different rules, they’re not combined automatically and you need to write the rule that combines them manually.)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AQ404
Solution 2 Eike Schulte

Related Questions