Css:border-collapse properties and opacity transparency of TD borders in table

First, the original is not a bug

Years ago, in Chrome, at first I thought it was a bug in the Chrome browser.

Today's prototype reproduction, in each modern browser under the test, obediently lung, all is a urine sex, it seems to be the norm, not a bug Ah! However, because the phenomenon is really strange, so far can not think of what is the case, so here to demonstrate and ask the small friends here, why this phenomenon?

Description of the phenomenon
An ordinary table, set Border-collapse:collapse, merge the borders of the table, which is normal and common.

We set the element opacity transparency value, for example 0.1, then the element should be transparent to 10%, including the border, background color, etc., which is also in line with our understanding, very normal.

However, the two together, there is a strange analysis. Table elements such as <td> border transparency appear to be 100% opacity minus <td> defined difference of transparency value (except Opacity:1)! That is, <td> sets the transparency 10%, the border is 90% transparency, and <td> sets the transparency 90%, the border is 10% transparency.

The text description is too pale, we still look at the example bar (ie10+, FireFox, Chrome can) ~

By default our <tbody> (easy to demonstrate,<td> effect) The opacity value is 1, so we see a harmonious effect:

However, we drag the range control on the demo page, modify the <tbody> Transparency Opacity property value, and, as a result, you will find that the,<tbody> transparency is 90% when I have a rub, the border direct transparency (The naked eye) is 10% The appearance of transparency.

The border of the last row of cells appears to be unaffected by opacity under Chrome, as follows:

Under the Firefox browser, all borders are opaque:

Then, we continue to drag, almost 10% transparency of the appearance of time, at this time, the text is transparent, but the color of the border is increasingly clear up!!

Even IE browser is not to be outdone:

Ii. Causes of problems

I want to use CSS3 to achieve a fade animation, that effect, weird pins and needles!

Third, how to avoid this embarrassment

In general, we use the table border is a single border, not the kind of lattice, at this time, we can:
Use Border-collapse:collapse only for low-version ie browsers, delete Border-collapse:collapse claims for advanced browsers, or use separate to reset, and then use border-spacing:0 Remove the cells and see the blanks you don't want.

As a result, transparency is in line with the normal cognitive rendering!