How to hide/show table rows in IE7

If you need to hide a table row (TR), you'd usually use the following:

.hide-tr { display:none; }

The problem develops when you later wish to show the row; simply setting the display to block is insufficient, as the individual cells in the row lose their positions and often get bunched next to each other. Using display:table-row works on most modern browsers, but IE7 ignores that and prefers display:inline-block. So the solution? There are a few ways to fix the problem, as indicated on Stack Exchange. The problem with using visibility:hidden is that the row still takes up space on the page and shrinking its height is a non-trivial task. Another solution involves a method less recommended, using browser and version detection via jQuery. However, it does fix the issue:

if ($.browser.msie && jQuery.browser.version == '7.0'){
  $('.hide-tr').css('display','inline-block');
}
else {
  $('.hide-tr').css('display','table-row');
}

Not a clean solution but it gets the job done :)

Update: An even easier solution: Simply call the jQuery show() method on the object and it's smart enough to apply the appropriate CSS to the object.