1

It appears that the top border of any non-first row in a table element is colored differently if that color is translucent (that is, with an alpha of 0 < α < 1).

The first row looks fine, but the second through nth rows look darker. This only happens if the color is translucent. My suspicion is that there's some overlapping of translucent borders going on here, but I can't figure out what, since the borders are only on top.

Here's the code: http://codepen.io/chharvey/pen/qdNZdK?editors=110

Here's what it looks like compared to a div with ps as rows, and spans as cells. (table on the left, div on the right.)

a comparison of a table and a table-like structure using divs and ps. each has 3 rows and each row has 3 columns. each row has a border-top of a translucent color. the borders on the 2nd and 3rd rows of the table appear darker than they should be.

If I add the following css, the div now appears exactly the same as the table, with the buggy borders:

div {
  display: table;
  border-collapse: collapse;
}
p {
  display: table-row;
}
chharvey
  • 8,580
  • 9
  • 56
  • 95
  • actually it looks like a browser rendering issue rather than a css. IE is ok, chrome Not and not Sure about FF. It maybe a webkit browser issue. have a look here -- http://stackoverflow.com/questions/25591499/chrome-bug-with-colspan-and-border – Tasos May 16 '15 at 17:17
  • 1
    from the link above this is the fix --- http://codepen.io/anon/pen/rVLeyp – Tasos May 16 '15 at 17:23
  • thanks @TasosAnastasiou. If you could post an answer explaining why `border-collapse: separate;` seems to fix the bug, that would be wonderful. – chharvey May 16 '15 at 17:30
  • I didn't know about the bug, but i suspected it was a chrome bug as it works ok in IE. and then i searched and saw @misterManSam answer from the link in my 1st comment. give him a point :)) – Tasos May 16 '15 at 17:37

0 Answers0