11

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:

  1. Why empty-cells are displayed when border-collapse: collapse is used ?

  2. Why empty cell are not displayed when border-collapse: separate is used ?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Sachin Jain
  • 21,353
  • 33
  • 103
  • 168

6 Answers6

24

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

Cristian Ciupitu
  • 20,270
  • 7
  • 50
  • 76
Peter O
  • 256
  • 2
  • 3
1

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>​
Nir Alfasi
  • 53,191
  • 11
  • 86
  • 129
  • Thanks a lot. But We have not used empty-cells property to hide empty-cells. Suppose we are filling the table content using java script, then we don't know which cell is gonna be empty. In that case the above solution won't work. So I want to use empty-cells property to be used. And I want to know the reason empty-cells are displayed with border-collapse: collapse ? – Sachin Jain Aug 19 '12 at 02:58
  • 1
    You're most welcome! While filling the table (using JS) you can change the `td` class as well. If you do that in two different places in the code (which you shouldn't) you can still check the value inside the cell using JS and change the class of the `td` respectively. About `border-collapse`, it just sets the border to a single line. – Nir Alfasi Aug 19 '12 at 03:14
  • That was quite good an answer. I am almost satisfied by the alternative solution you have provided for my problem. Still I am in hunt for the solution using empty-cell property.. BTW thanks a lot. – Sachin Jain Aug 19 '12 at 03:16
  • It won't work without using JS/jQuery since the properties of `td` override the properties of `table` hence the borders will be displayed. – Nir Alfasi Aug 19 '12 at 03:24
  • Change border:collapse to border:separate and see empty cells got hidden. Check this http://jsfiddle.net/blunderboy/gVWQE/4/ – Sachin Jain Aug 19 '12 at 03:51
  • @blunderboy good job! you should post the answer (without the jQuery code cause it's just confusing) and accept it! – Nir Alfasi Aug 19 '12 at 03:57
1

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.

Community
  • 1
  • 1
nuala
  • 2,681
  • 4
  • 30
  • 50
  • thanks a lot for the wonderful concept you have shared. Updated the question. – Sachin Jain Aug 19 '12 at 05:10
  • Glad you like it :) As for CSS I'm not so confident in this matter to contribute something meaningful so let's hope some wise CSS-guru will find your question ^^ – nuala Aug 19 '12 at 12:07
1

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!

Baby Groot
  • 4,637
  • 39
  • 52
  • 71
Borza Adrian
  • 509
  • 2
  • 12
1

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>
MD Ashik
  • 9,117
  • 10
  • 52
  • 59
-1

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).

Elmy
  • 211
  • 3
  • 9