Hide empty cells in table - html-table

Question

I want to hide empty cells in table. Here is my code:
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: collapse;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
You can see, empty cell is shown in 2nd row. But I want to hide it. Moreover, I don't want to use border-collapse:separate. Is this possible to hide the empty cell using border-collapse:collapse? I also want to know why this is showing empty cells.
P.S. Using border-collapse: separate is working and does not show empty cells.
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: separate;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
<th>Title three</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
<td class="empty">value</td>
</tr>
</table>
But this does not answer these questions:
Why empty-cells are displayed when border-collapse: collapse is used ?
Why empty cell are not displayed when border-collapse: separate is used ?

Answer 1

If your site doesn't require support for IE 8 and under, you could just use the CSS :empty pseudo-class:
td:empty {
visibility: hidden;
}
table.empty {
width: 350px;
border-collapse: collapse;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
td:empty {
visibility: hidden;
}
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
More about the :empty pseudo-class can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Answer 2

Assuming all cell you want to hide have the class ´.empty()´ I came up with this piece of jQuery:
$(function(){
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty(){
var theCell = $(this);
if(theCell.html().length == 0){
theCell.hide();
}
}​
aaaaand... it seems to work. :)
However as hide() doesn't preserve space you run into this problem if you try to do a donut shape.
Luckily there is another question discussing this problematic and the answer is to use
css('visibility','hidden')
Witch you can also find in this fiddle.

Answer 3

I found this solution on a good article I was reading.
I hope it will work for you too:
table {
empty-cells: hide;
}
Best regards!

Answer 4

Try the following
<style type="text/css">
table.empty{
width:350px;
border-collapse: collapse;
empty-cells:hide;
}
td.normal{
border-style:solid;
border-width:1px;
border-color: blue;
}
td.empty{
style:'display=none'
}
</style>
<table >
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="normal">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="empty"></td>
</tr>
</table>​

Answer 5

Just used CSS: empty-cells: hide;
Browser supported: Verified Link or Link 2
table {
border-collapse: separate;
empty-cells: hide;
}
NB: You can't use border-collapse: collapse; because it make Disable look empty cell hide
/******Call-Padding**********/
table {
/***
border-collapse: collapse; #Not use it ***/
border-collapse: separate;
empty-cells: hide;
}
td {
border: 1px solid red;
padding: 10px;
}
<table>
<tr>
<th>Head1 </th>
<th>Head2 </th>
<th>Head3 </th>
<th>Head4 </th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td></td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td></td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td></td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
</table>

Answer 6

Here's another sollution, since td:empty didn't work for me:
<style type="text/css">
table {
border-spacing: 0px; // removes spaces between empty cells
border: 1px solid black;
}
tr, td {
border-style: none; // see note below
padding: 0px; // removes spaces between empty cells
line-height: 2em; // give the text some space inside its cell
height: 0px; // set the size of empty cells to 0
}
</style>
The given code will completely remove any space an empty row would otherwise take up.
Unfortunately you have to set border-style: none;, else the borders of empty cells will be painted anyway (which results in thick lines).