0

我想知道如何在 HTML 中隐藏一行。使用 CSS 方法style="empty-cells : hide;"似乎可行，但如果<h4>标签包含在空表中，则不会隐藏该行。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>

<form name="form_simple" action=" " method="get">
<table border="1px" style="empty-cells : hide;">
<tr><td><h4>Empty cells should not have any borders around them</h4></td></tr>
<tr><td></td></tr>
<tr><td><h4>Empty cells should not have any borders around them.</h4></td></tr>
<tr><td><h4>Empty cells should not have any borders around them.</h4></td></tr>
</table>
</form>
</body>
</html>

style="empty-cells : hide;"适用于<tr><td></td></tr>，但不适用于<tr><td><h4></h4></td></tr>

4

2 回答 2

1

您可以使用 javascript 做到这一点：

var rows = ​document.get​ElementsByTagName('tr');
​​​​for (var i=0;i<rows.length;i++) {
    var t = rows[i].innerText || rows[i].textContent;
    if (t.trim().length==0) rows[i].style.display='none';
}​

示范

于 2012-12-21T10:23:31.560 回答
1

这是一个解决方法：

table td {
    background-color:olive;
    empty-cells:hide;
}
table td > *:empty {
    display:none;
}

jsfiddle

如果您只想定位，请更改*为.h4h4

请注意，根据MDN，empty-cells应该适用于表格单元格元素，而不是表格（尽管浏览器似乎无论如何都接受它）。

于 2012-12-21T10:23:59.547 回答