Question 231338 in CSS Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution:

    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 : enter image description here enter image description here


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search