A better alternative than for showing empty HTML table cells?

Question

It\'s a classic problem - when you have an empty table cell the browser doesn\'t render borders around it. There are also two well-known workarounds. One is to place an

Answer 1

You can also put invisible br element:

<td><br style="visibility:hidden"></td>

It is ridiculous amount of unnecessary code, but it makes the trick - no additional text added yet cell is displayed.

Note that <br/> is invalid HTML syntax according to the official specifications http://www.w3.org/TR/html401/struct/text.html#edef-BR. It is valid XHTML syntax however.

Answer 2

You can show the cells with this CSS code. I successfully tested it in Safari and Firefox. I guess it works in other browsers as well.

table {
  width: 100%;
  border: 0;
  empty-cells: show;
}
td {
  border: 1px solid grey;
}
td:empty:after {
  content: '.';
  color: transparent;
  visibility: hidden;
}
/* alternate background */

tr:nth-child(odd) td {
  background: rgba(0, 0, 0, 0.2);
}
tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.1);
}

<table>
  <tr>
    <td>Row</td>
    <td>1</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Row</td>
    <td>3</td>
  </tr>
</table>