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

html css html-table background-color

14,518

Solution 1

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>

Solution 2

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.

Solution 3

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

14,518

Author by

Chowlett

Software developer from Wiltshire, UK. Using Ruby (with or without Rails) at the office and in his spare time. Erstwhile C++ developer, where he also liked to get pretty gnarly. SOreadytohelp

Updated on June 04, 2022

Comments

Chowlett about 2 years

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?

Chowlett over 14 years

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.
Chowlett over 14 years

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).
Chowlett over 14 years

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".
Aaron Digulla over 14 years

Give that image at least 100px height. Otherwise, the browser is going to draw itself to death on the background.
Aaron Digulla over 14 years

You're right. I've posted a new solution which I've verified.
Lemon over 14 years

@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.
Lemon over 14 years

For example: background: url('cell-background.php?color=green') center repeat-y;
Simon Lieschke over 11 years

How is it not working in Internet Explorer 8? Make sure your page is not running in the Internet Explorer 7 Browser Mode or the Quirks Mode Document Mode.