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

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 2

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; }