Create a transparent div over a td or tr element

Question

Hello,

I have a table and I would like to be able to set up a transparent div over the entire row to show that it is inaccessible at the moment.

Here is my a row from my table:

<tr id="post_1998">
  <td id="post_1998_image">
 ...content...
  </td>
  <td class="description">
 ...more content...
  </td>
  <td class="buttons">
 ...even more content...
  </td>
</tr>

Perhaps something like the following would be able to set the transparency but I don't know how you would construct the css.

<tr id="post_1998">
  <td id="post_1998_image">
    <div class="transparent">
 ...content...
    </div>
  </td>
  <td class="description">
    <div class="transparent">
 ...more content...
    </div>
  </td>
  <td class="buttons">
    <div class="transparent">
 ...even more content...
    </div>
  </td>
</tr>

Thanks!

Answer 1

You could add a "Transparent" CSS Class, then from this you can either use a transparent PNG or go with one of the other options for transparency. Here is an article that talks a bit about transparency.

Answer 2

You want to use the z-index value in CSS. Make the transparent divs using appropriate CCSS code which you will find easily with a Google search, and then set the z-index on that div to a higher value (say 20 - a random choice). This places the div over the other content.

You need two different settings for different browsers to achieve transparency (from memory).

Some possible help:

Coding Day - making the div transparent

Answer 3

Create an empty PNG image with transparency on that is 1 pixel by 1 pixel (it barely take any resources).

Here is an example in CSS for transparent div:

#transparent
{
    position: absolute;
    z-index: 100;
    background-image: url('transparent_image.png');
    background-repeat: repeat;
}

You will have to give it some dimensions too (I did put any because I do not know what are the dimensions of you table nor where it is in the page).