CSS Safari : target table tr (even &odd) ignoring td and th to add background linear-gradient

Question

I want to define a new style of wordpress administration for the PostList page. I don't know if CSS 3 has a property to allow background-image using linear gradient to display at the whole of css "table row" and not independently in each TR. Until now all my attempts have been failures. Perhaps the CSS4 will allow that ?

I can't find a simple css solution to target only tr from table ignoring all child (td and th) to use background-image:linear-gradient().

this solution :

table-name tr:nth-child(even) 

add background to all td and th.

I want just target each row (tr) depending even or odd for me it would be direct childs from table.

I try

table-name:nth-child(odd or even)

or

table-name > *:nth-child(odd or even)

they don't work

Is javascript the only solution? it's really strange that the W3C hasn't thought of this

Answer 1

Here's a table with the tr elements set to have a linear gradient background. Is this what you mean?

table{
  border-collapse: collapse;
}

table tr {
  background:linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
             linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
             linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

table tr td {
  border: 1px solid #333; 
  padding: 1rem;
}

<table>
  <tr>
    <td>1:1</td><td>1:2</td><td>1:3</td>
  </tr>
  <tr>
    <td>2:1</td><td>2:2</td><td>2:3</td>
  </tr>
  <tr>
    <td>3:1</td><td>3:2</td><td>3:3</td>
  </tr>
  <tr>
    <td>4:1</td><td>4:2</td><td>4:3</td>
  </tr>
</table>

Answer 2

I found a solution, but it doesn't work for safari wordpress post list page however Chrome, edge, firefox work fine. I still haven't found a solution for safari

table tr:nth-child(odd or even)::before

I put the problem and the solution below in the code snippet Thanks for your answer.

table,
.tb2 {
  width: 100%;
  height: auto;
}
.tb2 {
  border-top: 5px solid;
  position: relative;
}
tr {
  width: 150px;
  height: 30px;
}
table:not(.tb2) tr:nth-child(odd) {
  background-image: linear-gradient(90deg, rgb(173, 173, 173), rgb(77, 77, 77)),
    linear-gradient(
      135deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      0deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      45deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ) !important;
  background-blend-mode: overlay, overlay, overlay, normal;
}
.tb2 tr:nth-child(odd)::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30px;
  background-image: linear-gradient(90deg, rgb(173, 173, 173), rgb(77, 77, 77)),
    linear-gradient(
      135deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      0deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      45deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ) !important;
  background-blend-mode: overlay, overlay, overlay, normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<table class="tb2">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

How safari render table tr with linear background :