如何在表中將td高度設置爲0px？

我有一個包含幾行的HTML表（這是動態構建的）。所有<tr> s裏面都有一個<td>。如何在表中將td高度設置爲0px？

如果其中一個<td>裏面沒有HTML內容，我希望它是不可見的。

這怎麼辦？（不是說HTML裏面是動態呈現的，我不想使用display:none或<td>或<tr>上的任何其他屬性）。

代碼示例：

<html> 
    <body bgcolor="#E6E6FA"> 
     <table cellSpacing="0" cellPadding="0"> 
      <tr> 
       <td>one cell</td> 
      </tr> 
      <tr> 
       <td bgcolor="#FF0000"></td> 
      </tr> 
      <tr> 
       <td>two cell</td> 
      </tr> 
     </table> 
    </body> 
</html>

在Firefox空TD是看不見的。然而，在IE的TD佔用了身高1個像素：

enter image description here

用DOM查看器的樣子，我看到，它需要1個像素：

enter image description here

如何設置的TD不可見？我可以在TD內執行任何腳本？

來源

2012-04-02 Tal

爲什麼你不想使用'display：none'？ – ComFreek 2012-04-02 07:49:47

我沒有控制上面的TR和TD。裏面的內容是動態渲染的。如果它是空的，我不希望它有1個像素。 – Tal 2012-04-02 07:50:49

我相信這是由於瀏覽器不一致。 IE是一個婊子，桌子是最糟糕的跨瀏覽器實現之一。這不是一個好的組合。 – iMoses 2012-04-02 07:56:35

您可以使用CSS僞選擇:empty：

#myDynamicTable td:empty 
{ 
    display: none; 
}

的jsfiddle例如：http://jsfiddle.net/vKEBY/6/

如果你想支持IE < 9：

var ieVer = getInternetExplorerVersion(); 
if (ieVer != -1 && ieVer < 9.0) { 
    // for IE<9 support 
    var dynamicTable = document.getElementById("myDynamicTable"); 
    var TDs = dynamicTable.getElementsByTagName("td"); 

    for (var i = 0; i < TDs.length; i++) { 
     if (TDs[i].innerHTML == "") { 
      TDs[i].style.display = "none"; 
     } 
    } 
} 

/** 
    * All credits to Microsoft 
    * http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx#ParsingUA 
    */ 
function getInternetExplorerVersion() 
// Returns the version of Internet Explorer or a -1 
// (indicating the use of another browser). 
{ 
    var rv = -1; // Return value assumes failure. 
    if (navigator.appName == 'Microsoft Internet Explorer') { 
     var ua = navigator.userAgent; 
     var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 
     if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); 
    } 
    return rv; 
}

的jsfiddle例如： http://jsfiddle.net/vKEBY/6/

來源

2012-04-02 07:55:26 ComFreek

雖然就IE而言，['：empty'只適用於IE 9]（http://www.browsersupport.net/CSS/%3Aempty）。 – 2012-04-02 07:56:22

@ PaulD.Waite你說得對，我剛剛測試過！但是您可以使用JavaScript構建解決方案。 – ComFreek 2012-04-02 07:57:40

，對於我們所知道的，OP只需要它在IE 9中工作。 – 2012-04-02 07:59:40

如果使用jQuery，這個腳本可能變得更乾淨（只是一個想法）。

$('#myTable td:empty').hide();

來源

2012-04-02 08:30:59 iMoses

但是，這隻適用於IE9及以上...正確？ – Tal 2012-04-02 08:49:19

不正確。 jQuery對所有跨瀏覽器支持進行了所有調整。它會在IE6上工作（如果有人不幸使用它）:) – iMoses 2012-04-02 09:05:51

值得一提的是，這不是一次調用代碼來設置規則，而是需要在表更改後再次調用。 – 2013-11-19 21:16:33

如何在表中將td高度設置爲0px？

回答

相關問題