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:

/

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

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/DelightedD0D/6Ajyn/1/

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

• javascript
• css

5 Answers 5

Use

document.getElementById("forfeitTable2").style.display="table";

instead of

document.getElementById("forfeitTable2").style.display="block";

JS Fiddle :- http://jsfiddle/6Ajyn/3/

can you try setting display to table instead of block!

if you set display to none, width:100% doesnt noe how to measure the width.

try this:

if(document.getElementById("forfeitTable2").style.display=="none"){
document.getElementById("forfeitTable2").style.display="block";
document.getElementById("forfeitTable2").style.width="100%";
}
else if(document.getElementById("forfeitTable2").style.display=="block"){
document.getElementById("forfeitTable2").style.display="none";
}
}

Just empty the css display property instead of setting it as block or table like this:

if(document.getElementById("forfeitTable2").style.display=="none"){
    document.getElementById("forfeitTable2").style.display="";
}

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

DEMO

To see a full list of possible values for the display property see style display property

When you hide a table to show it again use

document.getElementById("tableId").style.display="table";

when you hide table row to show it again use

document.getElementById("rowId").style.display="table-row";