Remove border-spacing when there is no data in a table - html

Question

I have an issue related to vertical whitespace in a table. I'm using the border-spacing CSS property to add some space between the table rows (to make them appear less-crammed).
Data is added dynamically in the table, so there can be the situation in which I have no data in the table (no trs) but there is some vertical whitespace due to the border-spacing property (which is currently border-spacing: 0px 10px).
Is there a possibility to fix this through CSS?
Fiddle example with data: http://jsfiddle.net/lav911/QLsah/
Fiddle example without data: http://jsfiddle.net/lav911/yWRS7/
I mention that the intended functionality would be not to display the table at all when there is no data in it.
Edit: Testing on Chrome.

Answer 1

You can use CSS :empty pseudo, and than use display: none;
table tbody:empty {
display: none; /* Than get rid of it */
}
Demo (No display: block; required there)
Still a small black dot remains, it is because of the border of your table element, since there's no way as of now to select the parent element using CSS, you cannot eliminate that without using jQuery, by selecting the parent element and applying border: 0;

Answer 2

like this
DEMO
table {
border-collapse:collapse;
}

Answer 3

CSS is not capable of knowing if selectors have content. Since you're adding it dynamically though, if there is no data present add a class to the table. something like:
<table class="empty"></table>
then, in your CSS, add:
table.empty {
display:none;
}
since you're using a framework that may or may not be editable, you can add this JS (using jQuery):
$(document).ready(function() {
if ($('table tr').length == 0) {
$('table').addClass('empty');
}
});