How to put borders on non-zero table cells?

Question

I have a function that outputs a table like this:

table {
  border: 1px solid;
}
td {
  width: 30px;
  height: 30px;
  text-align: center;
  //border: 1px solid;
}

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

I need borders around non-zero elements only. How to achieve that? Is it possible only in CSS?

There is no css selector based on text, http://stackoverflow.com/questions/5441680/css-selector-based-on-element-text — Nenad Vracar, Feb 08 '17 at 09:39
There's the [`:empty`](http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#empty-pseudo) edge case — Dinei, Feb 08 '17 at 16:37

score 2 · Accepted Answer · edited Feb 08 '17 at 12:56

table {
  border: 1px solid;
}
td {
  width: 30px;
  height: 30px;
  text-align: center;
  //border: 1px solid;
}
.asd{
border:2px solid red;
}

<table>
  <tr>
    <td class="asd">2</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td class="asd">1</td>
    <td>0</td>
  </tr>
  <tr>
    <td class="asd">1</td>
    <td class="asd">2</td>
    <td>0</td>
  </tr>

try this

 table {
  border: 1px solid;
}
td {
  width: 30px;
  height: 30px;
  text-align: center;
  //border: 1px solid;
}
.asd{
border:2px solid red;
}

css

<table>
  <tr>
    <td class="asd">2</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td class="asd">1</td>
    <td>0</td>
  </tr>
  <tr>
    <td class="asd">1</td>
    <td class="asd">2</td>
    <td>0</td>
  </tr>

This is a nice solution still I am open for JavaScript solutions also. — 555, Feb 08 '17 at 09:47

How to put borders on non-zero table cells?

1 Answers1