Is there a way to hide a data cell based on a specific value using just HTML/CSS?

Question

For example I have this code:

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td>$100</td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td class="results"></td>
    </tr>
</table>

Is there a way to hide the cells that are equal to $0 using HTML/CSS only? Let's say instead of $0 I have a variable called fee that can be a variety of values: $0, $20, $100, etc.

For example:

<script>
    var fees = ["$0", "$20", "$100"];
    document.querySelector('.results').innerHTML = fees[1];
</script>

Is there a way to check what value it is and if it is found to be $0 can I then hide it?

My CSS is:

table{
    border-width: 1px;
    border-style: solid;
    border-collapse: separate;
    width: 400px;
}

#test{
    empty-cells: show;
    margin-bottom: 20px;
}

tr, th, td{
    border-width:1px;
    border-style: solid;
}

.results {
    display: none;     // I want this to only display none when fees = $0
}

Answer 1

TL;DR: It's possible. Look for the last solution in my answer, or check this blog:

Conditional formatting with pure css

I am assuming you do not want to hide the cell, but only its value. Hiding a cell does not make sense in a table since it would potentially change the layout, also any cell borders etc would also be hidden - probably not what you want.

Now CSS does not have any selectors based on element text content. But it does support attribute value selectors. So, you could change your code to be:

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td><input value="$100"/></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td><input value="$0"/></td>
    </tr>
</table>

And use a rule like

input[value="$0"] {
    display: none;
}

You could even make the inputs not behave like inputs by adding a disabled attribute so they aren't editable.

If you don't want to use input elements, you could consider using spans instead and use a "data-value" attribute, and try if browsers respect that:

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td><span data-value="$100">$100</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span data-value="$0">$0</span></td>
    </tr>
</table>

The css woudl be:

td > span[data-value="$0"] {
    display: none;
}

Of course the drawback of this is that you would have to add the value twice (once as text content, once as attribute), and you need to generate an inner span element which feels a bit ugly.

Alternatively you could try to add a class attribute that includes the value and create a class selector:

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td ><span class="value100">$100</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span class="value0">$0</span></td>
    </tr>
</table>

and the css would be:

td span.value0 {
    display: none;   
}

Of course the drawbacks are the same as with the previous method - you have to generate the value twice, once as text content and once as classname, and you need to add the inner span.

EDIT: dollar char is not valid in css classnames, so I removed it.

EDIT2: It turns out there is a way to do it without duplicating the value as both text and attribute. As a bonus, it turns out you don't need the inner span either if we rely on the :after pseudoclass (since it is that class that gets hidden, not the cell itself):

<table border="1">
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td data-value="$100"></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td data-value="$0"></td>
    </tr>
</table>

Using this css:

  td:after {
      content: attr(data-value);
  }

  td[data-value="$0"]:after {
      content: "";
  }