Hide empty cells in table

cells, hide, html-table

Solution

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

Problem

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 ?

Original source

Related problems