Hide table row when cell is empty - css

Question

I'm having an issue where I can't seem to find an answer to, but I can't imagine it's not possible.
I have a table with two columns: the left column contains a label, the right side contains a value. However, the value can be empty. The label is fixed text.
What I want is to hide the entire row if the right cell of the row (the value) is empty.
For example:
<table>
<tr>
<td class="label">number of users:</td>
<td class="value">8</td>
</tr>
<tr>
<td class="label">total number of people:</td>
<td class="value"></td>
</tr>
</table>
Since the last row does not contain a value, I want the entire row to be hidden.
I can hide the cell using td:empty, but that's not enough. I tried to work around this by setting the height of the row to 0px and make it expand when the 'value'-cell is shown, but I can't get that to work either since the label cell already expands the row.
Anyone knows how I can tackle this problem using just HTML/CSS?

Answer 1

There's no parent selector in css, so you can't do this with css.
You may use jQuery:
$('td').each(function(){
if($(this).is(:empty)){
$(this).closest('tr').hide();
}
});
Or in shorter form,
$('tr:has("td:empty")').hide();
See the docs: :empty, :has,closest and each

Answer 2

While JavaScript is necessary to solve this problem, jQuery is, by no means, a requirement. Using the DOM, one can achieve this with the following:
function hideParentsOf(cssSelector) {
var elems = document.querySelectorAll(cssSelector);
if (elems.length) {
Array.prototype.forEach.call(elems, function (el) {
el.parentNode.style.display = 'none';
});
}
}
hideParentsOf('td:empty');
function hideParentsOf(cssSelector) {
// cssSelector: String,
// a string representing a CSS selector,
// such as 'td:empty' in this case.
// retrieving a NodeList of elements matching the supplied selector:
var elems = document.querySelectorAll(cssSelector);
// if any elements were found:
if (elems.length) {
// iterating over the array-like NodeList with Array.forEach():
Array.prototype.forEach.call(elems, function(el) {
// el is the current array-element (or NodeList-element in
// this instance).
// here we find the parentNode, and set its 'display' to 'none':
el.parentNode.style.display = 'none';
});
}
}
hideParentsOf('td:empty');
<table>
<tr>
<td class="label">number of users:</td>
<td class="value">8</td>
</tr>
<tr>
<td class="label">total number of people:</td>
<td class="value"></td>
</tr>
</table>
References:
CSS:
:empty pseudo-class.
JavaScript:
Array.prototype.forEach().
document.querySelectorAll().
Function.prototype.call().
Node.parentNode.
HTMLElement.style.

Answer 3

An HTML/CSS solution exists if you don't mind throwing out <table> <tr> and <td>. You can get the same end result with CSS - including still rendering like a table:
CSS:
/* hide if empty */
.hideIfEmpty:empty { display: none; }
/* label style */
.hideIfEmpty::before { font-weight:bold; }
/* labels */
.l_numberofusers::before { content:"Number of users: "; }
.l_numberofpeople::before { content: "Number of people:"; }
.l_numberofdogs::before { content: "Number of dogs:" }
/* table like rows/cells */
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
HTML
<!-- if the div.hideIfEmpty is empty, it'll be hidden;
labels come from CSS -->
<div class="table">
<div class="row hideIfEmpty l_numberofusers"><span class="cell">8</span></div>
<div class="row hideIfEmpty l_numberofpeople"><span class="cell">12</span></div>
<div class="row hideIfEmpty l_numberofdogs"></div>
</div>
The caveat is that your <div> has to be empty to hide the row, and values in the <div> must have a class .cell applied to them.
Result:
Number of users: 8
Number of people: 12
This will make your CSS very long if you have many labels/rows since you have to have one rule for every row to populate the label.