All geek questions in one place

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

I am trying to create an HTML table cell with a two-color background; so I have plain text on a background of yellow on the left and green on the right.

The closest that I still understood is the following. The background is correct half and a half, but the text of the content is shifted 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?

+4
source share
7 answers

Visually, each color is displayed as equal, so ideally you should support elements that set the background colors at the same level in the code instead of embedding them. Configure 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>
+4
source

You must insert the contents of the DIV into the yellow DIV :

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

[EDIT] This has a drawback: the internal DIV will be limited to the yellow DIV (ie, it will use only 50% of the page width).

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

+6
source

Maybe it's easier to use a background image? Then you can apply this to the cell.

+1
source

Try the following:

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

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

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

(Unverified, but should be something like this: p

0
source

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

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

For my solution, I did not have other elements or text inside the cell, so you can use the border of the cell to make it look as if you had 2 background colors. Therefore, applying both of these styles to a td set to 50 pixels appears with 2 pseudo-background colors.

 .halfleft_casual { border-right:25px solid blue; } .halfleft_member { border-right:25px solid green; }
0
source

Source: https://habr.com/ru/post/1304126/

More articles:


All Articles