Safari Table Row Gradient Background Repeat Bug

user_5184633 0
Viewed 730

When I use the gradient background in the tr tag, it seems to work normally in other browsers, but it seems as if the background code is applied to each td tag in Safari. You will understand what I mean when you run the sample code below both in Safari and in another browser. Anyone have a solution suggestion for this issue?

Chrome:

Chrome Sample

Safari:

enter image description here

table {
  border-collapse: collapse;
}

tr {
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
}
<table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table>

gradient safari background css html
2 Answers

In Safari (and also observed in Chrome on IOS) the background image seems to be being applied to each td element rather than their containing tr.

Adding display: block; to the tr element gives the correct result. However, I do not know whether this would disturb anything else in the table layout so this would need to be checked in any particular case.

Here’s the snippet. Tested on Safari and Chrome on iPad 14 and Chrome, Firefox, and Edge on Windows 10. Gives wrong result in IE11 on Windows10.

table {
  border-collapse: collapse;
}

tr {
  display: block;
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
}
<table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table>

user_108674540

Try to set background for table but not tr. Remove tr background attribute

table{
background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}
user_99311460
Related