Cómo crear una celda de la tabla con un fondo de dos colores?

StackOverflow https://stackoverflow.com/questions/2446168

Pregunta

Estoy intentando crear una celda de una tabla HTML con un fondo de dos tonos; así que tengo texto normal sobre un fondo que es de color amarillo a la izquierda, y el verde de la derecha.

Lo más cerca que tengo hasta ahora es como sigue. El fondo es correcta la mitad y mitad, pero el contenido de texto se desplaza por debajo de ella. 

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

¿Cómo puedo solucionar esto?

¿Fue útil?

Solución

Visualmente aparece cada color como iguales por lo ideal sería mantener los elementos que establecen los colores de fondo en el mismo nivel en el código en lugar de anidación de ellos. La construcción de la respuesta de Aarón: 

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

Otros consejos

Se debe anidar el DIV contenido en el DIV amarillo: 

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

[EDIT] Este tiene un defecto:. El DIV interior se limitará a la DIV amarillo (es decir, sólo se utilizará el 50% del ancho de página)

Así que necesitamos otro div, posicionamiento absoluto y una 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>

Funciona con FF 3.6.

Puede ser que sea más fácil de usar una imagen de fondo? A continuación, puede simplemente aplicar esto a la célula.

Prueba esto: 

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

Hay que crear una imagen larga y delgada con un color a la izquierda y otro a la derecha. Luego le dan un estilo como el siguiente: 

background: url(image) center center repeat-y;

(No probado, pero debe ser algo por el estilo: p

Si el td es de ancho fijo entonces puede hacer una imagen con dimensión igual a fixedWidth_in_px * 1px y establecer esta imagen como el fondo y poner el fondo de repetición para repetir-y, de modo que llene toda la altura de la td. Algo así como 

td.bg
{
    width: 100px;
    height: 100%;
    background: #fff url(imagepath) repeat-y;
}

Para mi solución tuve ningún otro elemento o texto dentro de la célula por lo que podría utilizar el borde de la celda para que parezca como si hay 2 colores de fondo. Así que la aplicación de estos dos estilos para td siguiente a 50 px aparece con 2 seudo colores de fondo. 

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top