Question

我想知道如何在HTML中隐藏一行。使用style="empty-cells : hide;"的CSS方法似乎有效，但如果<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>

Answer 1

您可以使用javascript执行此操作：

var rows = document.getElementsByTagName('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';
}

Demonstration

Answer 2

这是一个解决方法：

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

jsfiddle

如果您只想定位*，请将h4更改为h4。

请注意，根据MDN，empty-cells应该适用于 table-cell 元素，而不是 table （尽管浏览器似乎仍然接受它）。

使用HTML </h4>中的<h4>隐藏表的空行

2 个答案: