如何将边框放在非零表格单元格上？

Question

我有一个输出如下表格的函数：

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>

我只需要围绕非零元素的边框。 怎么实现呢？ 它只能在CSS中使用吗？

Answer 1

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>

试试这个

 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>