[html] How to make background of table cell transparent

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?

You can try :

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

    }
}

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

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

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).

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.

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

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%;"

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