CODEWITHSUNDEEP
htmlcsshtml-table
555
555

Reputation: 157

How to put borders on non-zero table cells?

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?

Upvotes: 1

Views: 64

Answers (1)

Edison Augusthy
Edison Augusthy

Reputation: 1573

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>

Upvotes: 2

Related Questions