CODEWITHSUNDEEP
htmlcsssafaribackgroundgradient
Çağrı Aldemir
Çağrı Aldemir

Reputation: 95

Safari Table Row Gradient Background Repeat Bug

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>

Upvotes: 8

Views: 1971

Answers (2)

A Haworth
A Haworth

Reputation: 36567

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>

Upvotes: 5

Red Wing Justice Chan
Red Wing Justice Chan

Reputation: 159

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%);
}

Upvotes: -1

Related Questions