1

I have some data that I'm reading from JSON and writing into a Table.

Currently looks like following.

<table>
<tr><td>Feature 1</td><td>true</td><td>false</td></tr>
<tr><td>Feature 2</td><td>false</td><td>false</td></tr>
<tr><td>Feature 3</td><td>true</td><td>true</td></tr>
</table>

What I want to do is leave the true/false data as it is but use CSS to turn the data into Tick/Cross or smiley / frown images.

I thing I have seen CSS3 notation for this, but I can't find it.

David Cruwys
  • 6,262
  • 12
  • 45
  • 91

1 Answers1

1

What you can you id manipulate the HTML a bit and add classes to the TD's with the values true/false.

    <tr><td>Feature 1</td><td class="true">true</td><td class="false">false</td></tr>

In the CSS you can use the attribute selector or in this class just the class selector

td.true {

}

td.false {

}

You might also be able to hide the text with the text-indent property. Alternatively you can just output the true/false as a class rather than HTML text in the cell.

eirikrl
  • 438
  • 1
  • 5
  • 17
  • you can shorten it by using `td.true` (it's a good idea to add a prefix, so the class name becomes like `td_true`) – dognose Jan 18 '13 at 08:22
  • yes what was I thinking. I was just thinking about adding attributes to TD that I forgot I was using a class and it can just use a class selector lol – eirikrl Jan 18 '13 at 08:25