Login/Register
How to create a table cell with a two-colour background?
Asked Answered
Solved htmlcsshtml-tablebackground-color
S

7

6

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?

Squinteyed answered 15/3, 2010 at 9:48 Comment(2)
Is the td with a fixed width? – Benedic
No, but I could probably arrange for it to be so. – Squinteyed
T
5

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>
Tutti answered 15/3, 2010 at 11:10 Comment(1)
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. – Tutti
C
5

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.

Catania answered 15/3, 2010 at 9:54 Comment(2)
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. – Squinteyed
You're right. I've posted a new solution which I've verified. – Catania
T
5

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>
Tutti answered 15/3, 2010 at 11:10 Comment(1)
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. – Tutti
P
1

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

Phosphorate answered 15/3, 2010 at 9:50 Comment(0)
C
0

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;
  }
Capacitance answered 15/3, 2010 at 9:51 Comment(1)
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". – Squinteyed
C
0

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

Craft answered 15/3, 2010 at 9:53 Comment(3)
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). – Squinteyed
@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. – Craft
For example: background: url('cell-background.php?color=green') center repeat-y; – Craft
B
0

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;
}
Benedic answered 15/3, 2010 at 10:3 Comment(1)
Give that image at least 100px height. Otherwise, the browser is going to draw itself to death on the background. – Catania
S
0

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;  
}
Silica answered 21/5, 2014 at 4:4 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.