Internet Explorer — table rendering bug

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 &nbsp; inside all empty <td> elements. For a client-side jQuery solution, this can be done using…

jQuery("td:empty").html("&nbsp;");

Note: &nbsp; 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 <table> element.

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.


  • ie
  • table
  • missing
  • border
  • borders
  • empty
  • cell
comments powered by Disqus