Question

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.

Answer 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.