HTML Element Style How to - Hide empty cells

Question

We would like to know how to hide empty cells.

Answer


<!--from ww w.j av  a2 s  . c o  m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {
  border-collapse: separate;
  empty-cells: hide;
}

table tr td {
  border-bottom: 1px dotted #ccc !important;
}
</style>
</head>
<body>
  <table>
    <tr>
      <td location="loc11">1</td>
      <td location="loc12">2</td>
    </tr>
    <tr>
      <td location="loc21">
        <!-- 3 -->
      </td>
      <td location="loc22">
        <!-- 4 -->
      </td>
    </tr>
    <tr>
      <td location="loc21">5</td>
      <td location="loc22">6</td>
    </tr>
    <tr>
      <td location="loc21">7</td>
      <td location="loc22">8</td>
    </tr>
  </table>
</body>
</html>
</body>
</html>

The code above is rendered as follows: