2

我有两张表，它们都具有相同的类和结构。我用 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/

  1. 为什么会这样？
  2. 我能做些什么来阻止它？
4

5 回答 5

4

采用

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

代替

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

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

于 2013-02-21T06:02:34.620 回答
2

您可以尝试将显示设置为表格而不是块！

于 2013-02-21T06:00:22.273 回答
2

如果将显示设置为无，宽度：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";
}
}
于 2013-02-21T06:06:50.827 回答
1

只需清空 cssdisplay属性，而不是像这样设置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";
}

演示

于 2013-02-21T06:09:33.957 回答
0

要查看属性的可能值的完整列表，display请参阅 样式显示属性

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

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

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

document.getElementById("rowId").style.display="table-row";
于 2015-05-25T14:31:18.687 回答