Home/ Questions/Q 9053613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T13:28:06+00:00

I would like to know how to hide a row in HTML. Using the

  • 0

I would like to know how to hide a row in HTML. Using the CSS method of style="empty-cells : hide;" seems to work, but if the <h4> tag is included in the empty table, then the row is not hidden.

<!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;" works for <tr><td></td></tr>, but not for <tr><td><h4></h4></td></tr>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a work-around:

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

    jsfiddle

    Change * to h4 if you only want to target h4.

    Note that according to MDN, empty-cells should apply to table-cell element, not table (although browsers seem to accept it anyway).

    • 0