iOS html table rows and linear graident don't look correct

Question

On iOS this seems to be per column compared to the web where it goes across the row nicely. You can view the table header below on desktop, than try iOS. The screenshot is attached on what is on iOS.

https://nikeeyb.com/eybl-standings/

.widgets-pools table tr.font-weight-bold {
    background: linear-gradient(to right, #E82276, #FFFFFF);
}

Did you ever get a solution for this that worked? – WillC Mar 24 '22 at 22:31 — WillC, Mar 24 '22 at 22:31

score 0 · Answer 1 · answered Jul 14 '21 at 06:50

This appears to be something that was common among browsers in the past see for example table row background image or Background Image on <tr>

Trying your site on Chrome/Edge and Firefox Windows10 all seems fine now, the linear gradient spans the whole tr.

On Safari (I tested using iPad IOS14) the problem still seems to exist.

You could try putting a pseudo element on the tr with the required linear gradient as background as that shouldn't get confused by the tds being there.

Could you try adding this CSS:

  .widgets-pools table tr.font-weight-bold {
    position: relative;    
  }
  .widgets-pools table tr.font-weight-bold::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #E82276, #FFFFFF);
    z-index: -1;
  }

(EDIT: and remove the background from the tr itself). and let me know what happens.

iOS html table rows and linear graident don't look correct

1 Answers1