title: Is there a way to hide a data cell based on a specific value using just HTML/CSS?
body: <p>For example I have this code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;caption&gt;Test&lt;/caption&gt;
      &lt;tr&gt;
          &lt;th&gt;Values&lt;/th&gt;
          &lt;td&gt;$100&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Initial value&lt;/th&gt;
          &lt;td class="results"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;script&gt;
      var fees = ["$0", "$20", "$100"];
      document.querySelector('.results').innerHTML = fees[1];
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there a way to check what value it is and if it is found to be $0 can I then hide it?</p>
  
  <p>My CSS is:</p>
  
  <pre><code>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
  }
  </code></pre>