Splitting a cell table in two triangles with two different colors in HTML
I am filling up a table, and each cell represents for states: NULL, a, b, a & b.
I was going to use the (background?) color to give this information. Having NULL cells white, a cells blue, b cells red, and a & b cells a cell divided into two triangles, one red and one blue. I tried to have the cell violet (violet=red+blue) but it is not intuitive enough.
Also since the table is much bigger and has all sort of data inside in the rest of the table I do not know the size of the cell.
I tried to make a red and blue image and tried to add it as a background, but it would not stretch to开发者_开发百科 fit the size of the cell.
I tried to add the image as <img src...>
but again without knowing the size of the cell it ends up imposing each own size and looks ugly.
I have Googled and it looks CSS3 is coming giving the possibility to have cell background that stretch. But, in the meantime, is there anything that can be done?
Id just switch to something i could tile.. for example alternating colored diagonal stripes.
Indeed, you cannot stretch image backgrounds (at least not withouth CSS3 or some javascript scripting) Related.
I guess a checkered tiled pattern (2x2 squares, half blue half red), or with vertical or horizontal strips, is the most easy way... I doubt this will look pretty, though.
make a div (width/height=0) with an image (width/height=100%) in it in the td. (div must start at 0 so it doesnt make the cell bigger) Make a jquery that runs over every cell and sets the size of the inner div = to that of the containing td. Not sure how many results you're looking at so this may be impractical for thousands of cells but you'd have to try and see. If you need help with the specific code i can help.
To get the effect you want, CSS3 will likely be your best bet. Check out CSS3 gradients, which you can use in backgrounds. They're a little better supported than image stretching. Even IE will do it with its filtering system, though no version can do diagonal, so it will have to be either horizontal or vertical for IE. Depending on your intended supported browsers, this may or may not be a big issue for you.
You might also be able to stick an image in the fields in <img>
tags, set a low z-index, and set the height and width properties to 100%. This should work, though it does add extraneous markup and can be harder to maintain.
精彩评论