Comment créer une cellule de tableau avec deux couleur d'arrière-plan?

Je suis en train de créer un tableau HTML cellule avec un à deux tons de fond; j'ai donc normal de texte sur un fond de couleur jaune, sur la gauche, et le vert sur la droite.

Le plus proche que j'ai eu jusqu'à présent est comme suit. Le fond est correctement moitié-moitié, mais le contenu du texte est déplacé en dessous.

<html>
  <head>
    <style type='text/css'>
      td.green
      {
        background-color: green; 
        padding: 0px; 
        margin: 0px; 
        height:100%;
        text-align:center
      }
      div.yellow
      {
        position:relative; 
        width: 50%; 
        height: 100%;
        background-color:yellow
      }
    </style>
  </head>
  <body style="width: 100%">
    <table style="width: 25%">
      <tr style="padding: 0px; margin: 0px">
        <td class="green">
          <div class="yellow"></div>
          <div class="content">Hello</div> 
        </td>
      </tr>
    </table>
  </body>
</html>

Comment puis-je résoudre ce problème?

Est le td avec une largeur fixe?
Non, mais je pourrais probablement faire.

OriginalL'auteur Chowlett | 2010-03-15

Visuellement chaque couleur apparaît comme son égal, donc, idéalement, vous auriez maintenir les éléments qui distinguent les couleurs d'arrière-plan, au même niveau dans le code au lieu de nidification. Construction d'Aaron réponse:

<html>
    <head>
        <style type='text/css'>
            td {
                padding: 0;
                margin: 0;
                text-align: center;
            }
            .container {
                position: relative;
            }
            .bg {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 50%;
            }
            .content {
                position: relative;
                z-index: 1;
            }
            .yellow {
                left: 0;
                background-color: yellow;
            }
            .green {
                right: 0;
                background-color: green;
            }
        </style>
    </head>
    <body style="width: 100%">
        <table style="width: 25%">
            <tr style="padding: 0; margin: 0">
                <td>
                    <div class="container">
                        <div class="content">Hello</div>
                        <div class="bg yellow"></div>
                        <div class="bg green"></div>
                    </div>           
                </td>
            </tr>
        </table>
    </body>
</html>

Solution sympa, mais il ne fonctionne pas avec IE8!
Comment est-il ne fonctionne pas dans Internet Explorer 8? Assurez-vous que votre page n'est pas en cours d'exécution dans le Navigateur Internet Explorer 7 en Mode ou en Mode Quirks Mode de Document.

OriginalL'auteur Simon Lieschke

Vous devez imbriquer le contenu DIV dans le jaune DIV:

<div class="yellow"><div class="content">Hello</div></div>

[EDIT] Cela a un défaut: L'intérieur de la DIV sera limitée à la jaune DIV (c'est à dire de n'utiliser que 50% de la largeur de la page).

Nous avons donc besoin d'un autre div, positionnement absolu et un z-index:

<html>
  <head>
    <style type='text/css'>
      td.green
      {
        background-color: green; 
        padding: 0px; 
        margin: 0px; 
        height:100%;
        text-align:center
      }
      div.yellow
      {
        position:absolute; left:0px; top:0px;
        width: 50%; 
        height: 100%;
        background-color:yellow
      }
      div.container { position:relative; height: 100%; }
      div.content { position:relative; z-index:1; }
    </style>
  </head>
  <body style="width: 100%">
    <table style="width: 25%; height: 150px;">
      <tr style="padding: 0px; margin: 0px">
        <td class="green">
          <div class="container">
          <div class="content">Hello</div> 
          <div class="yellow"></div>
          </div> 
        </td>
      </tr>
    </table>
  </body>
</html>

Fonctionne avec FF 3.6.

Qu'apporte le texte en ligne, mais bien sûr c'est sur (et autour de) la jaune bits, plutôt que centrés sur la jointure.
Vous avez raison. J'ai posté une nouvelle solution qui j'ai vérifié.
Bingo. Que fonctionne un régal (vérifié dans IE8).

OriginalL'auteur Aaron Digulla

1

Il pourrait être plus facile d'utiliser une image d'arrière-plan? Ensuite, vous pouvez simplement l'appliquer à la cellule.

OriginalL'auteur matpol

Essayez ceci:

  td.green
  {
    background-color: green;
    padding: 0px;
    margin: 0px;
    height:1em;
    text-align:center
  }
  div.yellow
  {
    width: 50%;
    height: 1em;
    background-color:yellow
  }
  .content {
    margin-top: -1em;
  }

Je préfère ne pas avoir à dicter la cellule de taille, même si je comprends que de le faire dans le sme n'est pas trop mauvais. C'est probablement ce qui liens étroits avec l'aide d'une image d'arrière-plan en termes de "si je".

OriginalL'auteur nickf

0

Il suffit de créer un long et mince d'image avec une seule couleur sur la gauche et un autre sur la droite. Puis donnez-lui un style comme suit:
```
background: url(image) center center repeat-y;
```
(Non testé, mais il devrait être quelque chose le long de ces lignes :p

Je préfère ne pas utiliser une image d'arrière-plan (même si je peux si il finit par être la seule option), parce que j'ai jusqu'à environ 6 paires de couleurs de la cellule peut être (selon que le contenu correspond à un objet qui peut avoir jusqu'à deux de 4 qualités différentes).
Utilisant des images de fond serait encore le plus simple et le plus propre je pense. Si vous êtes paresseux, comme je suis, vous pouvez toujours utiliser php pour générer les images à la volée (ce qui devrait probablement être mis en cache en quelque sorte). Envoyez simplement la couleur que vous voulez ou quelque chose comme ça comme un paramètre GET.
Par exemple: background: url('cell-background.php?color=green') center repeat-y;

OriginalL'auteur Svish
0

Si le td est de largeur fixe, alors vous pouvez faire une image de dimension égale à fixedWidth_in_px * 1px et de définir cette image comme arrière-plan et d'arrière-plan-repeat pour répéter-y, de sorte qu'il remplit la totalité de la hauteur de la td. Quelque chose comme
```
td.bg
{
    width: 100px;
    height: 100%;
    background: #fff url(imagepath) repeat-y;
}
```
Donner cette image au moins 100px de hauteur. Sinon, le navigateur va dessiner lui-même à la mort sur l'arrière-plan.

OriginalL'auteur rahul
0

Pour ma solution que je n'avais aucun autre texte ou des éléments à l'intérieur de la cellule, de sorte pourrait utiliser la frontière de la cellule pour le faire apparaître comme si il y a 2 couleurs d'arrière-plan. Ainsi, à l'application de ces deux styles de td mis à 50px apparaît avec 2 pseudo couleurs d'arrière-plan.
```
.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
```
OriginalL'auteur Jonathon Batson

Vous devez vous connecter pour publier un commentaire.