How to make background of table cell transparent

css, html, html-table

Solution

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.

Problem

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?

Original source