TheMountainThatCodes TheMountainThatCodes - 3 months ago 13
CSS Question

How to make a horizontal 2-colored strip in a tablecell?

I want to have a horizontal strip in a tablecell, such that the left side of it is one color (lets say blue) and the right one is a different one (lets say red). Now when i say left and right i don't mean exactly half, in fact the percentage of the strip that should be colored blue/red depends on some other data (that is easily accesible to any script files), and it can change for each tablecell. My dilemma is the following:


  • I think i should do this with 2 divs in a tablecell. I could set their colors in css and set their width in a script. But i'm not sure how to align the divs in the tablecell to get a horizontal strip, so i need suggestions exactly for how the css for the divs should look like. Also perhaps i can use a span element instead of div? And finally maybe instead of all this, coloring an image of a strip is the best solution?


Answer

Try using only css with no divs.

Is this what you wanted?

td {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(to right, red 15%, blue 15%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, red 15%, blue 15%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(to right, red 15%, blue 15%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red 15%, blue 15%); /* Standard syntax */
}
<table>
  <tr><td>gradient make two colors in each cell</td><td>defined with CSS only</td></tr>
  <tr><td>more</td><td>data</td></tr>
</table>

Comments