ansaurus

Question

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

Answer 1

+1 A:

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

matpol 2010-03-15 09:50:37

Answer 2

A:

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

nickf 2010-03-15 09:51:33

I'd prefer not to have to dictate the cell-size, although I understand that doing so in ems isn't too bad. This probably ties with using a background image in terms of "if I have to".

Chris 2010-03-15 10:07:27

Answer 3

A:

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

Svish 2010-03-15 09:53:01

I'd prefer not to use a background image (although I can if it ends up being the only option), because I have up to about 6 colour pairs the cell can be (depending on whether the content represents an object that can have up to two of 4 different qualities).

Chris 2010-03-15 10:04:55

@Chris: Using background images would still be the easiest and cleanest I think. If you are lazy, like I am, you can always use php or something to generate the images for you on the fly (which should probably be cached somehow). Just send the color you want or something like that as a GET parameter.

Svish 2010-03-15 11:05:47

For example: `background: url('cell-background.php?color=green') center repeat-y;`

Svish 2010-03-15 11:09:30

Answer 4

+4 A:

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.

Aaron Digulla 2010-03-15 09:54:07

That brings the text in line, but of course it's on top of (and centred in) the yellow bit, rather than centred across the join.

Chris 2010-03-15 09:59:25

You're right. I've posted a new solution which I've verified.

Aaron Digulla 2010-03-15 10:42:11

Bingo. That works a treat (verified in IE8 as well).

Chris 2010-03-15 10:52:18

Answer 5

A:

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

rahul 2010-03-15 10:03:56

Give that image *at least* 100px height. Otherwise, the browser is going to draw itself to death on the background.

Aaron Digulla 2010-03-15 10:41:10

Answer 6

+1 A:

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>

Simon Lieschke 2010-03-15 11:10:59

ansaurus

tags:

views:

answers:

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

related questions