The other day I came across a strange issue in Internet Explorer. Empty cells in a
<table> element were being rendered with missing borders. As you can see in the screenshot below, the empty cells have missing borders…
After some googling, I came across a Stack Overflow question discussing the same issue. With full credit to the answers given there, I am summarizing the potential solutions here.
Firstly, on the server-side, add an
inside all empty
<td> elements. For a client-side jQuery solution, this can be done using…
has issues with screen–readers, so using a…
<span style="zoom: 1"></span>
… is also suggested.
An alternate solution is to add these two attributes…
… on the
In addition to the above solutions, removing the void between two
<td> elements might also help. You can find a clean workaround by Harry Roberts (CSSWizardy.com) where he suggests to use empty HTML comments to fill the void.
Hopefully, this should help resolve the issue.