CSS Property Value How to - empty-cells: show;

Question

We would like to know how to empty-cells: show;.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
table {<!-- ww  w .  j a v  a  2  s.c o  m-->
  border-collapse: separate;
}

table, td {
  border: 1px solid #000000;
}

table.show {
  empty-cells: show;
}

table.hide {
  empty-cells: hide;
}
</style>
</head>
<body>
  <table class="show">
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
    </tr>
    <tr>
      <td>Itme 3</td>
      <td></td>
    </tr>
  </table>
  <br>
  <table class="hide">
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
    </tr>
    <tr>
      <td>Itme 3</td>
      <td></td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: