移动问题上的 CSS thead 渐变背景

Question

I have a gradient in my table css. On desktop browsers like Chrome, Firefox and Safari it looks as intended, however on mobile browsers it does not have the intended effect. Gradient is supposed to stretch on the entire header but on mobile it repeats on header cells instead.

Anyone able to help me?

This is how it looks on desktop

This is how it looks on mobile

This is the css that I implementen. Should be fine but I cannot figure out why it doesn't work on mobile.

 table thead { background: linear-gradient(to right, #ffcf28, #f28d00); background-image: -webkit-linear-gradient(right, #ffcf28, #f28d00); } table th:first-child { border-top-left-radius: 8px; } table th:last-child { border-top-right-radius: 8px; } table th { color: white; background-color: transparent; }

 <table> <thead> <tr> <th>Kostensoort</th> <th>Tarief</th> </tr> </thead> <tbody> /* cut the cells for clarity */ </tbody> </table>

Answer 1

I am using the tr selector but it is not working on mobile (iOS - chrome, safari and mozilla)

any other workaround to make this work? thanksss

 tr:nth-child(odd) { background: linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(91,91,91,1) 35%, rgba(118,118,118,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333333",endColorstr="#767676",GradientType=1); width: 100%: }

this is what it looks like in mobile

it should be like this... (desktop)