How to make the background of a transparent table cell transparent

I am creating a table inside a table for the "all users" page. The first table was divided into two parts - advertising and users. In the "users" table in the section, <tr><td>...</td></tr>I created another table for each of the user data that appears through php.

Here is 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) contains the "users" table, which displays their profile images, which is good.
Now I put this nice blurry background on my page, but background> "→ blocks it.

How can I make this white background transparent? I tried to do 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;
}

I really need your help. I searched for this for several days and still have not found a single answer.

UPDATE

What I was looking for looks like this <td style="background:transparent;">, but still I did not find it on the Internet. Or is it even possible to make the table and cell transparency transparent?

+4
source share
7 answers

, , , td, . , , , CSS. script . , script, , td. background-position , . , body ( left top, background-position td):

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

-

, background-position, , , td .

+1

, :

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

rgba . 1 100% , 0 100% .

+6

?:)

background-color: #D8F0DA;

 background: none

, .

.

-, -

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

. 'tbody' , , .
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

+1

, ? background-color: #D8F0DA,

, # D8F0DA , color: #D8F0DA

0

CSS "background-color: transparent", apha rgba. : "background-color: rgba (216,240,218,0);"

- . 0 ( ) 1 ( ).

0

"transparent" , !

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

Source: https://habr.com/ru/post/1540050/


All Articles