CODEWITHSUNDEEP
cssborder
Vincent Teyssier
Vincent Teyssier

Reputation: 2217

Borders opacity rgba(x,x,x,y) in a table not working properly

I'm setting a border bottom to each line of my table, no other styling:

#myTable tr {border-bottom: 1px solid rgba(220,220,220, 1);}

This works perfect. Now I want to reduce the opacity by replacing the above code by:

#myTable tr {border-bottom: 1px solid rgba(40,40,40, 0.2);

The result is that the border bottom of the last tr is lighter than the other borders, which is not normal. It looks like borders going over each other, but it is impossible as I have not set up any border-top. I even tried by explicitely setting border-top to 0px solid white and other combinations, but still the same behaviour.

Can anyone explain me why it's behaving like that ? Is opacity inside rgba() not handled by borders ?

EDIT: I have only tested this in Chrome, not IE or FF

Upvotes: 0

Views: 677

Answers (2)

Richard Xia
Richard Xia

Reputation: 694

This is apparently a bug in Chrome that is still present as of April 2017. https://bugs.chromium.org/p/chromium/issues/detail?id=548903

Neither Firefox nor IE exhibit this bug, but Safari does exhibit the bug due to sharing the same renderer as Chrome.

Upvotes: 0

vals
vals

Reputation: 64164

Your table is inheriting the border value, and applying twice the value, one over the other

You can check this using a more visible value on hover:

table {
  border-collapse: collapse;
}

tr td {
  width: 200px;
  border-bottom: solid 20px rgba(255,0,0,0.25);
}

table  {
  border-bottom: solid 20px rgba(255,0,0,0.95);
}

table:hover {
  border-bottom: solid 21px rgba(255,0,0,0.95);
  
}
<table>
<tr>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
</table>

The best solution that I could find is creating a border that once doubled, gets the same appearance .. (Not easy)

table {
  border-collapse: collapse;
}
td {
  width: 200px;
}
tr:nth-last-child(n+2) {
  border-bottom: solid 20px rgba(255, 0, 0, 0.25);
}
table {
  border-bottom: solid 21px rgba(255, 0, 0, 0.45);
}
<table>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
</table>

from the w3c documentation

17.6.2.1 Border conflict resolution

In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself), and these borders may vary in width, style, and color. The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style 'hidden' unconditionally turns the border off.

The following rules determine which border style "wins" in case of a conflict:

Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.) If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.

Upvotes: 2

Related Questions