CODEWITHSUNDEEP
htmlcsshtml-tablebackground-color
Chowlett
Chowlett

Reputation: 46687

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

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?

Upvotes: 6

Views: 15412

Answers (7)

Jonathon Batson
Jonathon Batson

Reputation: 1233

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

Upvotes: 0

Simon Lieschke
Simon Lieschke

Reputation: 13333

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>

Upvotes: 5

Aaron Digulla
Aaron Digulla

Reputation: 328860

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.

Upvotes: 5

rahul
rahul

Reputation: 187110

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

Upvotes: 0

Svish
Svish

Reputation: 158361

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

Upvotes: 0

nickf
nickf

Reputation: 546503

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

Upvotes: 0

matpol
matpol

Reputation: 3074

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

Upvotes: 1

Related Questions