Pivot Table CSS - hide value if 0

Help Center Get Answers
1

Does anyone know the CSS to hide a value on a pivot table if it is 0? I have some tables with mostly zeros and it would be great to hide them or change the colour so make the actual values stand out.

Thanks a lot!

2

I am very rusty on my Knack knowledge but I did ask one of those AI things and it confirmed my suspicion. This will need a touch of JavaScript. Sorry I don’t have a complete solution for you, but you’ll want to trigger the bit of script it spit out on the right view.

Prompt:
Can I use just CSS to set a td element to “display: none” if it’s content is the text “0”?

Answer:
No, you cannot achieve that using CSS alone. CSS is a styling language and does not have the capability to dynamically modify the content of an element based on its text value.

To achieve this functionality, you would need to use JavaScript. JavaScript can traverse the DOM, access the content of elements, and apply styles dynamically based on certain conditions.

Here’s an example of how you can achieve the desired behavior using JavaScript:

<table>
  <tr>
    <td>1</td>
    <td>0</td>
    <td>3</td>
  </tr>
</table>

<script>
  var tds = document.querySelectorAll('td');

  for (var i = 0; i < tds.length; i++) {
    if (tds[i].textContent === '0') {
      tds[i].style.display = 'none';
    }
  }
</script>

In this example, JavaScript selects all td elements using document.querySelectorAll('td'). It then iterates through each td element and checks if its textContent is equal to '0'. If it is, the display property of that element is set to 'none', effectively hiding it from view.

Remember to place this JavaScript code after the HTML markup to ensure that the elements are available in the DOM before the script runs.