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によると、 table ではなく table-cell 要素に適用する必要があることに注意してください(ただしempty-cells、ブラウザはとにかくそれを受け入れるようです)。

于 2012-12-21T10:23:59.547 に答える