CODEWITHSUNDEEP
htmlcss
Luxy
Luxy

Reputation: 69

How to make <tr> in a table transparent in HTML?

I have a table which has a background color. But i was trying to keep a TR in that table transparent. I tried using background-color:transparent didnt worked. I used !important. Still didnt work. Can anyone please suggest where i am going wrong.

Below is my code.

<table style="background: #EAE9E6 100%; width:30%;">
  <tr style="background: transparent !important;">
    <td>
    </td>
    <td>
      <b>Yes</b>
      <b>No</b>
      <b>All</b>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" checked="checked" name="Frog" value="0" />
      <input type="radio" name="Cat" value="0" />
      <input type="radio" name="Goat" value="0" />

    </td>
  </tr>
</table>

Upvotes: 0

Views: 1947

Answers (1)

Paulie_D
Paulie_D

Reputation: 115098

You can't "override" a background applied to a parent element to 'cut through' it.

You'll need to apply a background to all rows that aren't the first one instead.

table tr:not(:first-child) {
  background: red;
}
<table style="width:30%;">
  <tr>
    <td>
      <b>Yes</b>
      <b>No</b>
      <b>All</b>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" checked="checked" name="Frog" value="0" />
      <input type="radio" name="Cat" value="0" />
      <input type="radio" name="Goat" value="0" />

    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" checked="checked" name="Frog" value="0" />
      <input type="radio" name="Cat" value="0" />
      <input type="radio" name="Goat" value="0" />

    </td>
  </tr>
</table>

Upvotes: 2

Related Questions