Hide empty cells in a table

Question

I want to hide empty cells in a 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 that an empty cell is displayed in the second row. But I want to hide it. Moreover, I do not want to use border-collapse:separate . Is it possible to hide an empty cell using border-collapse:collapse ? I also want to know why this shows empty cells.

PS Using border-collapse: separate works 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 are empty cells displayed when border-collapse: collapse ?

• Why doesn't an empty cell appear when border-collapse: separate ?

Answer 1

If your site does not require support for IE 8 and lower, you can simply use the class pseudo-class :empty :

 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 information about the :empty class pseudo-class can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Answer 2

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 3

Assuming the whole cell you want to hide has the class'.empty () 'I came up with this jQuery piece:

 $(function(){ $(".empty").each(hideCellIfEmpty); }); function hideCellIfEmpty(){ var theCell = $(this); if(theCell.html().length == 0){ theCell.hide(); } }​ 

aaaaand ... it works . :)

However, since hide() does not save space, you run this problem if you try to make a donut shape.
Fortunately, this is another question discussing this issue, and the answer is to use

 css('visibility','hidden') 

You can also find the witch in this script .

Answer 4

I found this solution in a good article I read.

I hope this works for you too:

 table { empty-cells: hide; } 

Respectfully!

Answer 5

Just used CSS: empty-cells: hide;

Supported Browser : Verified Link or Link 2

 table { border-collapse: separate; empty-cells: hide; } 

NB: you cannot use border-collapse: collapse; because it does Disable to see the 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 solution, since td:empty doesn'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> 

This code will completely remove any space that would otherwise occupy an empty string. Unfortunately, you have to set border-style: none; otherwise, the borders of empty cells will be colored in any case (which leads to thick lines).