如何在表格中将单元格高度设置为0px？

Question

如何在表格中将单元格高度设置为0px？

htmlhtml-table

5

我有一个包含几行的HTML表格（这是动态构建的）。所有<tr>都里面只有一个<td>。

如果一个<td>没有HTML内容，我希望它是不可见的。

如何做到这一点？（注意，内部HTML是动态呈现的，我不想在<td>或<tr>上使用display:none或任何其他属性）。

代码示例：

<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个像素的高度：

DOM检查器显示它占用了1个像素：

我怎样才能使TD不可见？有没有任何脚本可以在TD内执行？

- Tal

为什么你不想使用 display:none？ - ComFreek

我无法控制上面的TR和TD。里面的内容是动态渲染的。如果它是空的，我甚至不想有1个像素。 - Tal

1

我认为这是由于浏览器不一致性造成的。IE是个麻烦，而表格具有最糟糕的跨浏览器实现之一。这不是一个好的组合。 - iMoses

2个回答

0

如果使用jQuery，这个脚本会变得更加简洁（只是一个想法）。

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

- iMoses

2

不正确。jQuery会进行所有的调整以实现完全的跨浏览器支持。它可以在IE6上运行（如果有人不幸地使用它） :) - iMoses

值得一提的是，这不是一次性调用以设置规则的代码，而是如果表格发生更改，则需要再次调用。 - Adam Tolley

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ComFreek · Accepted Answer

您可以使用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 example: http://jsfiddle.net/vKEBY/6/