How to make background of table cell transparent

Question

I am creating a table inside a table for my  quot all users quot  page  The first table was divided in to two parts--the ads and the users--  Inside the  quot users quot  table under  lt tr gt  lt td gt     lt  td gt  lt  tr gt   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  quot users quot  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   lt table id    quot MainTable quot  gt     lt tr gt       lt td width    quot 20  quot  gt               lt  td gt        lt td width    quot 80  quot  gt           lt table        gt    php users appear code here    lt  table gt       lt  td gt    lt  tr gt   lt  table gt   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  lt td style  quot background transparent  quot  gt  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

User · Answer

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

User · Answer

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

User · Answer

You can do it setting the transparency via style right within the table tag    lt table id  Main table  style  background-color rgba 0  0  0  0    gt    The last digit in the rgba function is for transparency  1 means 100  opaque  while 0 stands for 100  transparent

User · Answer

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

User · Answer

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    lt table id    MainTable  gt    lt tr gt        lt td width    20   gt  lt  td gt       lt td width    80   id  test  gt         lt table gt           lt tr gt  lt td gt something interesting here lt  td gt  lt  tr gt           lt tr gt  lt td gt another thing also interesting out there lt  td gt  lt  tr gt         lt  table gt       lt  td gt    lt  tr gt   lt  table gt    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

User · Answer

I use the  transparent  keyword and it works perfect    lt style type  text css  gt   img table tr  td       border  1px solid transparent      align  center       border-spacing  25px      border-collapse  collapse      border-width  5px      padding  5px      padding-left  50px

User · Answer

You can try      media print        table td       table th           background-color  transparent  important          -webkit-print-color-adjust  exact  important

User · Answer

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

User · Answer

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

[html] How to make background of table cell transparent

Examples related to html

Examples related to css

Examples related to html-table