28172 sujets

CSS et mise en forme, CSS3

[Résolu] <div> avec background dans un <td>, comment rempl

Bonjour à tous.

Je vous explique ce que j'essaye de faire:
J'ai un tableau (pour des données, pas pour l'architecture de mon site ^^) dans lequel je n'ai pas d'accès individuel à chaque cellule (<td>). Je peux mettre une classe pour tous les <td> ou aucun.

Seulement voilà, certaines cellules en fonction de leur contenu devraient avoir un background-color spécifique. Je me suis donc dis que pour ce type de cellule, j'allais placer un <div> à l'intérieur qui lui contiendrait la classe CSS avec la couleur de fond.

J'ai réussi au début à faire que cette couleur prenne bien l'ensemble de la cellule et que donc l'utilisateur n'y voit que du feu... Seulement voilà maintenant j'ai un autre soucis....

Je suis obligé d'appliquer un décalage à toute mes cellules via padding pour que le contenu ne soit pas collé aux bordures... donc j'applique cela à toutes mes cellules (<td>) et évidemment là, c'est le drame Smiley biggol : la couleur de fond ne prend plus l'intégralité de la cellule.

Bref, avez-vous une idée pour que la couleur de fond de ma <div> prennent l'entièreté de mon <td> sachant que j'ai ceci:

<table>
<tr>
<td style="padding: 10px">
<div style="background-color: red;"></div>
</td>
</tr>
</table>


Je sais évidemment qu'il y a la solution facile qui serait de dire: 
Bah descend "margin" au niveau de la <div> tient!

Seulement ce que j'ai omis de vous dire c'est qu'il est assez difficile pour moi d'ajouter systématiquement un <div> dans mon <td> et que donc, je ne dois le faire que pour les cellules de mon tableau qui peuvent avoir une couleur différentes en fonction de la donnée contenue.

Merci d'avance pour votre aide.

PS: ah oui j'oubliais... ce doit être IE6 proof Smiley bawling
Modifié par koD (05 May 2011 - 16:59)
Hello Smiley smile

Pour ton problème de padding, c'est normal il faut mettre ton padding sur le div et non le td (cf un schémas du box model .

Pour ton autre souci, je suppose que tu peux pas tout simplement rajouter une classe aux td en question que tu veux modifier ?

Tu pourrais essayer les selecteurs adjacents (A+B) si c'est toujours le même td que tu veux modifier, mais c'est pas IE6 proof.
Merci pour ta réponse Smiley smile

Toutefois, cela ne va malheureusement pas arranger mon problème parce que je n'ai pas tout à fait été complet. Dans mes <td>, je peux avoir en gros 3 types de contenus que voici:

Cas 1:

<td>
     <div>Simple text</div>
</td>


Cas 2: 

<td>
     <div>
          <span>Another Text</span>
     </div>
</td>


Cas 3:

<td>
     <div>
          <div style="background-color: red;">My Special Text</div>
     </div>
</td>


La 1ère <div> du <td>, je n'ai aucun accès dessus (je veux dire pour pouvoir changer l'un mais pas celui de la cellule précédente)
Je ne peux pas mettre le padding sur ce <div> sinon même problème, la couleur de fond sera partielle.
Petite question tout d'abord : ton css tu le mets en ligne comme ici ? Ou c'est juste pour l'exemple ?

Sinon tu peux "tricher" avec :

/* un padding de 10px à gauche sur tous les divs */
  td div{padding-left:10px;}
/* pour les div dans les div, on "cache" le padding avec une margin négative */
  td div div {margin-left:-10px;}


(mais je suis pas sûre à 100% d'avoir compris ce que tu voulais faire)
Non non il se trouve dans des class, c'est pour l'exemple Smiley langue
Je vais essayer avec ce que tu m'indiques et je pense que ça devrait fonctionner.
Sujet clos
Aller à