Como criar uma célula de tabela com um fundo de duas cores?

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

Pergunta

Estou tentando criar uma célula de tabela HTML com um fundo de dois tons; Então, eu tenho texto normal em um fundo que é amarelo à esquerda e verde à direita.

O mais próximo que cheguei até agora é o seguinte. O plano de fundo é corretamente e meio, mas o texto de conteúdo é deslocado abaixo dele.

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

Como posso consertar isso?

Foi útil?

Solução

Visualmente, cada cor aparece como igual de maneira tão idealmente que você manteria os elementos que definiam as cores de fundo no mesmo nível no código em vez de aninhá -los. Construindo a resposta de Aaron:

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

Outras dicas

Você deve aninhar o conteúdo DIV no amarelo DIV:

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

Editar] Isso tem uma falha: a div interior será confinada ao amarelo DIV (ou seja, ele usará apenas 50% da largura da página).

Então precisamos de outro div, posicionamento absoluto e um 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>

Trabalha com FF 3.6.

Pode ser mais fácil usar uma imagem de fundo? Você pode então aplicar isso à célula.

Experimente isso:

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

Basta criar uma imagem longa e fina com uma cor à esquerda e outra à direita. Em seguida, dê um estilo como o seguinte:

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

(Não testado, mas deve ser algo nesse sentido: P

Se o TD for de largura fixa, você poderá fazer uma imagem com dimensão igual a fixedWidth_in_px * 1px e defina esta imagem como o plano de fundo e defina o fundo-repetição para repetir-se, para que ela preencha toda a altura do TD. Algo como

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

Para minha solução, eu não tinha outros elementos ou texto dentro da célula, para que pudesse usar a borda da célula para fazer parecer que existem 2 cores de fundo. Portanto, a aplicação desses dois estilos no TD definida como 50px aparece com 2 cores pseudo -fundo.

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top