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

Share Improve this question Follow edited Aug 29, 2018 at 9:17 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 21, 2013 at 5:57 Wesley SmithWesley Smith 19.6k2222 gold badges9191 silver badges134134 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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";