web-dev-qa-db-fra.com

Comment rendre le fond de la cellule de tableau transparent

Je crée une table dans une table pour ma page "Tous les utilisateurs". La première table était divisée en deux parties: les publicités et les utilisateurs. Dans la table "utilisateurs" sous <tr><td>...</td></tr>, j'ai créé une autre table pour que chacune des données de l'utilisateur apparaisse via php.

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

Comme vous pouvez le voir sur l'image, le côté droit de la table parent (plus large que celui de gauche) contenait la table "utilisateurs" où leurs images de profil étaient affichées, ce qui est bien.
Maintenant, je mets ce joli fond flou sur ma page mais le fond de cellule blanche de la table parente le bloque.

Comment puis-je rendre ce fond blanc devenir transparent? 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 CSS

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

S'il vous plaît j'ai vraiment besoin de votre aide. Je suis sur Google depuis des jours et je n'ai toujours pas trouvé de réponse

METTRE À JOUR

Ce que je cherchais ressemblait à ceci <td style="background:transparent;"> mais je ne l’ai pas trouvé sur le Web. Ou est-il même possible de rendre la table et l'arrière-plan de la cellule transparents?

htmlcsshtml-table
6
Emo-Punk

Un fond transparent vous aidera à voir ce qui se cache derrière l'élément, dans ce cas ce qui derrière votre td est en fait la table parent. Nous n'avons donc aucun moyen de réaliser ce que vous voulez en utilisant du CSS pur. Même si vous utilisez un script, vous ne pouvez pas le résoudre directement. Nous pouvons 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. Cependant, nous devons mettre à jour le background-position en conséquence lorsque la fenêtre est redimensionnée. Voici le code que vous pouvez utiliser avec la position d'arrière-plan par défaut de body (qui est left top, sinon vous devez 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 (mieux utiliser 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);

Démo.

Essayez de redimensionner la fenêtre, vous verrez le background-position mis à jour correctement, ce qui donnera un effet ressemblant à l’arrière-plan de la td est transparent au corps.

3
King King

Vous pouvez le faire en définissant la transparence via un style directement dans la balise table:

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

Le dernier chiffre de la fonction rgba concerne la transparence. 1 signifie 100% opaque, tandis que 0 signifie 100% transparent.

10
Catalin Marcu

Qu'est-ce que c'est? :)

background-color: #D8F0DA;

Essayer 

 background: none

Et le remplacement ne fonctionne que si la propriété est exactement la même.

fond ne remplace pas la couleur de fond.

Si vous voulez une transparence alpha, utilisez quelque chose comme ceci

background: rgba(100, 100, 100, 0.5);
3
R_G

C'est possible  
Vous devez aussi simplement appliquer la couleur à l'élément 'tbody', car c'est le corps de la table qui nous a posé problème en jetant un œil en dessous.
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

1
MajklCan

Vous donnez de la couleur à l'arrière-plan et vous attendez à ce qu'il soit transparent? Supprimez background-color: #D8F0DA, 

Si vous voulez que # D8F0DA soit la couleur du texte, utilisez color: #D8F0DA

0
Maxzeroedge

J'utilise le "transparent" mot clé et cela 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;
}
0
Reihan_amn

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

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

0
Samuel Freitas