爲什麼.style.display =「block」更改我的表格的長度？

我有兩個表都具有相同的類和結構。我用CSS來設計課程，他們看起來就像我想要的一樣。爲什麼.style.display =「block」更改我的表格的長度？

問題是，如果其中一個表開始隱藏，並且稍後使用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"; 
    } 
}

這個演示可以probly解釋它比我能更好：

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

爲什麼會出現這種情況？
我能做些什麼來阻止它？

來源

2013-02-21 DelightedD0D

你可以嘗試設置顯示到表而不是塊！使用替代

來源

2013-02-21 06:00:22 Ankit

人，你的救星！這是一個怪異的怪胎，我整夜。謝謝！（當它允許我在8分鐘內接受你的回答） – DelightedD0D 2013-02-21 06:03:53

你可以標記任何答案作爲答案:)！ – Ankit 2013-02-21 06:07:16

IE7不支持'display：table'屬性。 – 2013-02-21 06:14:30

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

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

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

來源

2013-02-21 06:02:34

IE7不支持'display：table'屬性 – 2013-02-21 06:17:11

如果你設置顯示爲none，寬度：100％犯規NOE如何測量寬度。

試試這個：而不是將其設置爲block或table這樣

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-21 06:06:50

IE7不支持'display：table'屬性。 – 2013-02-21 06:18:00

對不起...我只是在測試它。你可以使用塊而不是表格，它將工作在相同的位置..將進行編輯 – 2013-02-21 09:03:22

只是空的CSS display屬性：

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

來源

2013-02-21 06:09:33

要看到可能的完整列表display屬性的值請參閱 style display property

當您隱藏一個表來顯示它再次使用

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

當你隱藏的錶行，以顯示其再次使用

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

來源

2015-05-25 14:31:18

爲什麼.style.display =「block」更改我的表格的長度？

回答

相關問題