Comment rendre l'arrière-plan de cellule de tableau transparent

Je suis entrain de créer un tableau à l'intérieur d'un tableau pour mon "tous les utilisateurs". Le premier tableau est divisé en deux parties-les annonces et les utilisateurs--. À l'intérieur de la table "users" sous <tr><td>...</td></tr>, j'ai créé une nouvelle table pour chaque utilisateur de l'affichage des données via php.

Voici l'image : http://postimg.org/image/3mbeyb411/

Comme vous pouvez le voir dans l'image, le côté droit de la table parent (qui est plus grand que celui de gauche) contenu de la table "users" où leurs photos de profil apparaissent, ce qui est bon.

Alors j'ai mis ce joli flou d'arrière-plan sur ma page, mais le table parent blanc du fond de la cellule est le blocage.

Comment puis-je faire de ce fond blanc deviennent transparents? J'ai essayé de faire le background:transparent; mais en vain.

<table id = "MainTable">
  <tr>
    <td width = "20%">

     </td>

    <td width = "80%">
        <table.......>***php users appear code here***</table>
    </td>
 </tr>
</table>

Et pour le CSS

#MainTable {
    width: 100%;
    background-color: #D8F0DA;
    border: 1px;
    min-width: 100%;
    position: relative;
    opacity: 0.97;
    background: transparent;
}

Il vous plaît j'ai vraiment besoin de votre aide. J'ai cherché sur Google ce pendant des jours et n'a toujours pas trouver une seule réponse

Mise à JOUR

Ce que je cherchais quelque chose comme ce <td style="background:transparent;"> mais encore, je n'ai pas trouver sur le web. Ou est-il même possible de faire de la table et de la cellule arrière-plan transparent?

<tr style="background-color: #ffffff;"></tr>

OriginalL'auteur Emo-Punk | 2014-05-10

  1. 3

    Arrière-plan Transparent de vous aider à voir ce que derrière l'élément, dans ce cas, ce que derrière votre td est en fait la table parent. Donc, nous n'avons aucun moyen d'obtenir ce que vous souhaitez à l'aide de pur CSS. Même en utilisant un script ne peut pas le résoudre d'une manière directe. On peut tout simplement avoir une solution de contournement en utilisant un script basé sur l'idée d'utiliser le même arrière-plan pour le corps et le td. Toutefois, nous devons mettre à jour le background-position en conséquence whenver la fenêtre est redimensionnée. Voici le code que vous pouvez utiliser avec le fond par défaut de position de body (qui est left top, sinon, vous devrez changer le code pour mettre à jour le background-position de la td correctement):

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

    La démo.

    Essayez de redimensionner la fenêtre d'affichage, vous verrez le background-position mis à jour correctement, ce qui fera un effet à la recherche, comme le fond de la td est transparent pour le corps.

    OriginalL'auteur King King

  2. 11

    Vous pouvez faire le réglage de la transparence via style dans la balise table:

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

    Le dernier chiffre dans le rgba fonction est pour la transparence. 1 signifie que 100% opaque, tandis que 0 représente 100% transparent.

    OriginalL'auteur Catalin Marcu

  3. 3

    Qu'est-ce que cela? 🙂

    background-color: #D8F0DA;

    Essayer 

     background: none

    Et remplacer fonctionne uniquement si la propriété est exactement le même.

    de fond ne modifie pas couleur d'arrière-plan.

    Si vous voulez la transparence alpha, puis utiliser quelque chose comme cela

    background: rgba(100, 100, 100, 0.5);
    Merci, j'ai essayé, mais le fond du tableau est devenu transparent.. ce que je voulais dire, c'est l'arrière-plan des cellules est devenu transparent".... J'ai essayé de créer une image transparente dans photoshop et de définir l'image de fond d'écran mais encore, les cellules sont encore en blanc.-
    Si vous utilisez l'image d'arrière-plan, puis ne pas utiliser la couleur de fond. Et si vous souhaitez utiliser l'opacité alors je vous suggérons d'utiliser RGBA valeur alpha de 0,97 comme dans mon exemple. Mais vous voulez quelque chose d'inférieur à 0,97, je suppose.
    Donc, vous voulez l'ensemble de la table en arrière-plan, mais la cellule doit être transparent? Sonne comme Portail de jeu pour moi. Aucun moyen que vous pouvez le faire en css.
    Alors, que pouvez-vous proposer ?
    Les bordures du tableau, peut-être. Peut-être que je ne comprends pas votre question.

    OriginalL'auteur R_G

  4. 1

    Il est possible
    Vous avez juste besoin aussi pour appliquer la couleur 'tbody' de l'élément qui est le corps de table qui a été à l'origine de nos problèmes par jeter un oeil en dessous.
    table, tbody, tr, th, td{
    background-color: rgba(0, 0, 0, 0.0) !important;
    }

    OriginalL'auteur MajklCan

  5. 0

    Vous donnez de la couleur à l'arrière-plan, puis s'attendait à être transparent?
    Supprimer background-color: #D8F0DA,

    Si vous voulez #D8F0DA être la couleur du texte, utilisez color: #D8F0DA

    Eh bien, techniquement, il n'a remplacer par background: transparent.
    Mais parfois, ce transparent est ignoré. S'est passé avec moi un peu de temps.
    Comment puis-je faire de la cellule arrière-plan transparent?

    OriginalL'auteur Maxzeroedge

  6. 0

    Vous pouvez utiliser la propriété CSS "background-color: transparent;", ou de l'utilisation apha sur rgba de la représentation des couleurs. Exemple: "background-color: rgba(216,240,218,0);"

    L'apha est la dernière valeur. C'est un nombre décimal qui va de 0 (totalement transparent) et 1 (totalement visible).

    OriginalL'auteur Samuel Freitas

  7. 0

    - Je utiliser le "transparent" mot-clé et il fonctionne parfaitement!

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

    OriginalL'auteur Reihan_amn