1

I have a table where I want to style cells depending on a dynamic value. What I need to accomplish something like this:

enter image description here enter image description here

So there are cells that splits two colors, other with solid colors,other with solid color but like with a pattern over it, and other with just border (red).

So each element is a <td> HTML tag

I was thinking in creating images and then set those as background but I would like to know if there is a simple CSS way to do it.

Any advice?

Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
VAAA
  • 14,531
  • 28
  • 130
  • 253
  • http://lea.verou.me/demos/css3-patterns.html from this blog post http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ Seems to have a few of the patterns you're after. – SubjectCurio Jul 04 '14 at 15:42
  • Hi, in terms of performance what would be better: background image or pure css? Considering that I will have a table with 31 columns and 50 rows. Thanks a lot – VAAA Jul 04 '14 at 15:44

2 Answers2

1

Sure. Create two triangles with CSS using :before and :after pseudo-selectors and then position them directly over your td.

TBH, it's probably easier, and more robust, to use a background image though.

Seth Warburton
  • 2,234
  • 1
  • 16
  • 17
1

Here is your answer : DivWithGradientColor

Here is table example: Table cell withtwo-colors

html

    <div>
</div>

css

 div{
        border:1px solid black;
        background: linear-gradient(-45deg,blue 50%, red 50%);
        height:100px;
        width:100px;
    }
Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
  • 1
    Hi, in terms of performance what would be better: background image or pure css? Considering that I will have a table with 31 columns and 50 rows. Thanks a lot – VAAA Jul 04 '14 at 15:51
  • pure css will be better for everything! Images will slow your website! bro! no doubt! please vote! – Suresh Karia Jul 04 '14 at 15:52
  • Thanks bro! Please up vote [arrow] for answer! And let me know if you have any further query regarding this issue! – Suresh Karia Jul 04 '14 at 15:59
  • @VAAA pure css is **not** better for everything. Depending on how much you're using it on your pages, and how complex it is, it can _really_ slow down performance. And on some browsers it won't even work. Apart from the initial request & load, images are tiny performance wise, and have better backwards compatibility. The only way you'll know for sure is to test it yourself. Fake 500 rows, Fake 1,000 rows. See how it performs. If it works nicely, keep it with CSS. There's a quite good post discussing CSS vs Image performance here http://stackoverflow.com/q/8069535/1557617 – SubjectCurio Jul 07 '14 at 07:10
  • yes but overall css rules! in future images will be replaced by svgs and css3 components in websites! – Suresh Karia Jul 07 '14 at 09:01