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