How to make background of table cell transparent

Question

I am creating a table inside a table for my "all users" page. The first table was divided in to two parts--the ads and the users--. Inside the "users" table under <tr><td>...</td></tr>, I created another table for each of the user's data to appear via php.

Here's the image : http://postimg.org/image/3mbeyb411/

As you can see in the image, the right side of the parent table (which is larger than the left one) contained the "users" table where their profile pictures appeared which is good.
Now I put this nice blurry background on my page but the parent table's white cell background is blocking it.

How can I make that white background become transparent? I tried doing the background:transparent; but to no avail.

<table id = "MainTable">
  <tr>
    <td width = "20%">
      
     </td>

    <td width = "80%">
        <table.......>***php users appear code here***</table>
    </td>
 </tr>
</table>

And for CSS

#MainTable {
    width: 100%;
    background-color: #D8F0DA;
    border: 1px;
    min-width: 100%;
    position: relative;
    opacity: 0.97;
    background: transparent;
}

Please I really need your help. I've been Googling this for days and still didn't find a single answer

UPDATE

What I was looking for is something like this <td style="background:transparent;"> but still I didn't find it on the web. Or is it even possible to make the table and the cell's background transparent?

Answer 1

Transparent background will help you see what behind the element, in this case what behind your td is in fact the parent table. So we have no way to achieve what you want using pure CSS. Even using script can't solve it in a direct way. We can just have a workaround using script based on the idea of using the same background for both the body and the td. However we have to update the background-position accordingly whenver the window is resized. Here is the code you can use with the default background position of body (which is left top, otherwise you have to change the code to update the background-position of the td correctly):

HTML:

<table id = "MainTable">
 <tr> 
    <td width = "20%"></td>
    <td width = "80%" id='test'>
      <table>
        <tr><td>something interesting here</td></tr>
        <tr><td>another thing also interesting out there</td></tr>
      </table>
    </td>
 </tr>
</table>

CSS:

/* use the same background for the td #test and the body */
#test {
  padding:40px;
  background:url('http://placekitten.com/800/500');    
}
body {
  background:url('http://placekitten.com/800/500');
}    

JS (better use jQuery):

//code placed in onload event handler
function updateBackgroundPos(){
  var pos = $('#test').offset();
  $('#test').css('background-position', 
                            -pos.left + 'px' + " " + (-pos.top + 'px'));
};
updateBackgroundPos();
$(window).resize(updateBackgroundPos);

Demo.

Try resizing the viewport, you'll see the background-position updated correctly, which will make an effect looking like the background of the td is transparent to the body.

Answer 2

You can do it setting the transparency via style right within the table tag:

<table id="Main table" style="background-color:rgba(0, 0, 0, 0);">

The last digit in the rgba function is for transparency. 1 means 100% opaque, while 0 stands for 100% transparent.

Answer 3

It is possible
You just also need to apply the color to 'tbody' element as that's the table body that's been causing our trouble by peeking underneath.
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

Answer 4

What is this? :)

background-color: #D8F0DA;

Try

 background: none

And override works only if property is exactly the same.

background doesn't override background-color.

If you want alpha transparency, then use something like this

background: rgba(100, 100, 100, 0.5);

Answer 5

I use the "transparent" keyword and it works perfect!

<style type="text/css">
#img table,tr, td {
    border: 1px solid transparent;
    align="center";
    border-spacing: 25px;
    border-collapse: collapse;
    border-width: 5px;
    padding: 5px;
    padding-left: 50px;
}

Answer 6

You are giving colour to the background and then expecting it to be transparent? Remove background-color: #D8F0DA,

If you want #D8F0DA to be the colour of text, use color: #D8F0DA

Answer 7

You can use the CSS property "background-color: transparent;", or use apha on rgba color representation. Example: "background-color: rgba(216,240,218,0);"

The apha is the last value. It is a decimal number that goes from 0 (totally transparent) to 1 (totally visible).

Answer 8

Just set the opacity for the inner table. You can do inline CSS if you want it just for a specific table element, so it doesn't apply to the entire table.

style="opacity: 0%;"

Answer 9

You can try :

  @media print {
    .table td,
    .table th {
        background-color: transparent !important;
        -webkit-print-color-adjust: exact !important;

    }
}