:before pseudo-element causes gap in border

Question

I have this piece of HTML that I want to style. The html is a table (and actual table), which I want to give a border. The element also had a :before pseudo-element, which I use to put a small triangle in the top corner.

The JSFiddle is here. I hope it makes sense. I stripped down the markup and the CSS as much as possible, because it's actually a small part of a big site.

http://jsfiddle.net/GolezTrol/28yDb/2/

Now the problem is that the combination of having 2 columns, having border-collapse: collapse; on the table and the :before pseudo element, cause the top border of the element to partially disappear. It's only there for the length of the first column.

You would assume that it is the pseudo element that is on top of the border, but this element is very small, and as far as I can tell, this could not be the problem. I added visibility: hidden; to the pseudo element to be sure, and I can tell that the triangle is gone, but the border is still incomplete.

Unfortunately I cannot change the markup, since this is outputted by MediaWiki, but I do have full control over the CSS.

The HTML:

<div id="globalWrapper">
<div id="column-content">
<div class="thumb tright">
<table class="infobox vcard" style="">
    <tbody>
        <tr>
            <th colspan="2" class="fn org" style=""> Example text</th>
        </tr>
        <tr>
            <th>Row head</th>
            <td>Content</td>
        </tr>

The CSS:

/* Generic table styling */
table {
  border-collapse: collapse;
  /*border-spacing: 0;*/ }

/* The box */
.thumb.tright table.infobox.vcard {
    border: 3px solid #fae104;
    position: relative;
}

/* Triangle */
  .thumb.tright table.infobox.vcard:before {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    border-top: 5px solid transparent;
    top: -7px;
    border-left: 10px solid #555;
    visibility: hidden;
    right: -1px; }

I already found out that it works when I remove border-collapse: collapse;, but I'm not sure that is a proper solution, and even if it is, I would really like an explanation of what is going on.

Btw. I got this problem both in Chrome 29 and in Internet Explorer 10. Haven't tested other browsers.

Update

Instead of using -or not using- 'border-collapse' to fix the problem, I found out that this also works:

.thumb.tright table.infobox.vcard tbody {
    display: block;
}

So the table itself is still a table, the pseudo element is still on the table, as is the border, positioning etc. The tbody, which was unstyled before, is now a block and the problem is solved in both browsers. I found this by trial and error, and still wouldn't know the reason behind it.

Updated fiddle: http://jsfiddle.net/GolezTrol/28yDb/9/

Answer 1

Being a newbie to StackOverflow and jsFiddle I updated the Fiddle with that I think is the solution. I didn't change the CSS except for moving the pseudo class from the table itself to the table header, and changing it into :after. Works for me in Firefox and Chrome!

/* Triangle */ 
.thumb.tright table.infobox.vcard th:after { }

Border-collapse: seperate is not supported in IE8 but I think this will be.

• edit: nevermind ;)