Question

I have two tables that both have the same class and structure. I style the class with CSS and they look just like I want.

The problem is that if one of those tables starts off hidden and is later displayed using JavaScript the outline ive given it shrinks to wherever the text is that it surrounds.

this is the code used to display the table:

function setTable(){    
   if(document.getElementById("forfeitTable2").style.display=="none"){
      document.getElementById("forfeitTable2").style.display="block";
   }
   else if(document.getElementById("forfeitTable2").style.display=="block"){
      document.getElementById("forfeitTable2").style.display="none";
   }
}

This demo can probly explain it better than I can:

http://jsfiddle.net/DelightedD0D/6Ajyn/1/

1. Why does this happen?
2. What can I do to stop it?

Answer 1

can you try setting display to table instead of block!