PDA

View Full Version : HTML/CSS - Changing Table Cells Color

acrokos
09-03-2002, 05:45 PM
Hi,

How would you change the color of a cell value in a table to red if that value is a negative number using a css?

Sample HTML Table:

<html>

<head>
</head>

<body>

<table border="1">
<tr>
<td colspan="5">
<p align="center">TABLE TITLE</p>
</td>
</tr>
<tr>
<td >TITLE A</td>
<td >TITLE B</td>
<td >TITLE C</td>
<td >TITLE D</td>
<td >TITLE E</td>
</tr>
<tr>
<td>25</td>
<td>-25</td>
<td>-25</td>
<td>25</td>
<td>25</td>
</tr>
<tr bgcolor="#C0C0C0">
<td>-25</td>
<td>25</td>
<td>25</td>
<td>-25</td>
<td>-25</td>
</tr>

</table>

</body>
</html>
applesauce
09-04-2002, 02:59 PM
i don't think you can automatically do that with css. you could creat 2 different classes, though, for the different cells.
ACJavascript
09-04-2002, 04:48 PM
Yea, apple is right, CSS isn't able to perform if else functions to check if a number is negative or positive...
acrokos
09-04-2002, 05:04 PM
THANKS FOR THE INPUT...I THOUGHT THIS WOULD BE THE CASE FOR CONDITIONAL CSS FORMATTING.
jkd
09-04-2002, 05:11 PM
If you don't mind slightly invalid HTML, instead of <td>25</td> use <td value="25"></td>

And then:

td:before { content: attr(value); }
td[value^="-"] { background: red; }
td:not([value^="-"]) { background: green; }

Puts positive numbers with a green bg, and negative numbers with a red one.

This will only work in Mozilla though, if even that, due to most popular browsers not supporting this level of CSS2 and 3. (Moz will do the selectors for sure, I'm just not sure about content: attr() support)
acrokos
09-04-2002, 08:17 PM
jkd Thanks