Quiero ocultar celdas vacías en la tabla. Aquí está mi código:

$(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>

Se puede ver, la celda vacía se muestra en la segunda fila. Pero quiero ocultarlo. Por otra parte, no quiero usarborder-collapse:separate. ¿Es posible ocultar la celda vacía utilizandoborder-collapse:collapse? También quiero saber por qué esto muestra celdas vacías.

PD Utilizandoborder-collapse: separate Está funcionando y no muestra celdas vacías.

$(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>

Pero esto no responde a estas preguntas:

¿Por qué se muestran las celdas vacías cuandoborder-collapse: collapse se utiliza?

¿Por qué las celdas vacías no se muestran cuandoborder-collapse: separate se utiliza?