A better alternative than for showing empty HTML table cells? - html

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 in the table cell; the other is to use the empty-cells:show CSS property.
Unfortunately both have drawbacks. is kind of ugly when it comes to selecting text and copy-pasting it. You get a lot of spaces where there shouldn't be any, perhaps even with an exotic Unicode character. empty-cells:show should address exactly this problem, but unfortunately it only works properly in IE starting with version 8 (and then only in standards-compliant mode). It can be made to work in other versions by also specifying border-collapse: collapse, but sometimes this is what is NOT desired. In my case I have a fairly complex table and it relies on border-collapse:separate and would otherwise create quite a messy CSS/HTML soup.
So what are other things that you might put in a table cell that would make IE draw the borders yet not be visible or copyable? For all other browsers the empty-cells:show already does the trick, so I really just need to fool IE.

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>