Question

我有两个表具有相同的类和结构。我用CSS设置了类，它们看起来就像我想要的那样。

问题在于，如果其中一个表开始隐藏并稍后使用JavaScript显示，那么它的轮廓缩小到它所环绕的文本的任何位置。

这是用于显示表格的代码：

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

这个演示可以比我更好地解释它：

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

为什么会这样？
我该怎么做才能阻止它？

Answer 1

使用

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

而不是

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

JS小提琴： - http://jsfiddle.net/6Ajyn/3/

Answer 2

你可以尝试将显示设置为表而不是阻止！

Answer 3

如果将display设置为none，则width：100％不知道如何测量宽度。

试试这个：

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

Answer 4

只需清空css display属性，而不是将其设置为block或table，如下所示：

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

Answer 5

要查看display属性的可能值的完整列表，请参阅 style display property

当您隐藏表格再次显示时，请使用

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

当您隐藏表格行再次显示时使用

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

为什么.style.display =“block”会改变我桌子的长度？

5 个答案: