如何在表中将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？

回答

相关问题