Order table with hidden td's

Question

Hola, les tengo una consulta... tengo una tabla la cual cada tiene una tabla adentro con una clase llamada "cnt" y otra que corresponde a una letra. Con ésto, lo que hago es utilizando una funcion javascript y teniendo una lista de letras con labels que en el onclick van a esa funcion, ocultan o muestran dependiendo de la letra, la tabla correspondiente. La funcion es la siguiente:

function order(letter) {
  if (letter == "all") {
    $(".cnt").show();
  }
  else {
    $(".cnt").each(function(i, element) {
      if ($(this).hasClass(letter)) {
        $(this).show();
      }
      else
        $(this).hide();
    });
  }
}

El problema es que ésto no me posisiona los datos visibles de tal manera que queden bien alineados en una cuadrícula uno al lado del otro, es decir, quedan espacios entre ellos. no se si me explico, pero espero me puedan entender y me puedan dar alguna solución, muuchas gracias!

Edit: Google says:

I have a table which each has a table inside with a class called cnt and another that corresponds to a letter. With this, what I do is using a javascript function and having a string of letters with the labels that go to that function on click, hide or show depending on the letter, the corresponding table. The function is:

function order(letter) {
  if (letter == "all") {
    $(".cnt").show();
  }
  else {
    $(".cnt").each(function(i, element) {
      if ($(this).hasClass(letter)) {
        $(this).show();
      }
      else
        $(this).hide();
    });
  }
}

The problem is that this is not me Reverse the visible data so that they will remain aligned in a grid next to each other, ie, are spaces between them. not if I can explain, but I hope I can understand and can give me some solution, many thanks!

Answer 1

The show and hide functions of jQuery alter the display property of an element. hide sets the display property to none

From the W3C website:

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

That means that table cells are effectively pulled out of the table.

What you should use is the visibility property:

function order(letter) {
  if (letter == "all") {
    $(".cnt").css('visibility', 'visible');
  }
  else {
    $(".cnt").each(function(i, element) {
      if ($(this).hasClass(letter)) {
        $(this).css('visibility', 'visible');
      }
      else
        $(this).css('visibility', 'hidden');
    });
  }
}

See: CSS Properties for more info about these properties