How to create a table cell with a two-colour background?

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

Question

I'm trying to create an HTML table cell with a two-tone background; so I have normal text on a background which is yellow on the left, and green on the right.

The closest I've got so far is as follows. The background is correctly half-and-half, but the content text is displaced below it.

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

How can I fix this up?

Was it helpful?

Solution

Visually each colour appears as equals so ideally you'd maintain the elements that set the background colours at the same level in the code instead of nesting them. Building off Aaron's answer:

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

OTHER TIPS

You must nest the content DIV in the yellow DIV:

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

[EDIT] This has a flaw: The inner DIV will be confined to the yellow DIV (i.e. it will only use 50% of the page width).

So we need another div, absolute positioning and a 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>

Works with FF 3.6.

It might be easier to use a background image? You can then just apply this to the cell.

Try this:

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

Just create a long thin image with one color on the left and another on the right. Then give it a style like the following:

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

(Untested, but should be something along those lines :p

If the td is of fixed width then you can make an image with dimension equal to fixedWidth_in_px * 1px and set this image as the background and set background-repeat to repeat-y, so that it fills the entire height of the td. Something like

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

For my solution I had no other elements or text inside the cell so could use the border of the cell to make it appear as if there are 2 background colours. So applying both these styles to td set to 50px appears with 2 pseudo background colours.

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top