¿Cómo puedo ocultar una fila de tabla HTML <tr> para que no ocupe espacio?

105

¿Cómo puedo ocultar una fila de una tabla HTML <tr>para que no ocupe espacio? Tengo varios <tr>configurados en style="display:none;", pero aún afectan el tamaño de la tabla y el borde de la tabla refleja las filas ocultas.

MikeN
fuente
2
¿Se muestran / ocultan repetidamente? O cuando están ocultos, ¿se han ido para siempre? Porque podría usar javascript para eliminar la fila y probablemente solucionaría su problema.
brettkelly
Quiero iniciarlos como ocultos y luego mostrarlos si el usuario hace clic en un botón para "mostrar más". Cuando están ocultos, no quiero que ocupen espacio vertical.
MikeN
Tuve este mismo problema, si elimina () la fila con javascript, todavía ocupa algo de espacio en IE6. no hay manera de evitar sucky IE
mkoryak
1
¿Qué tipo de documento estás usando? Acepto que el simple hecho de que esté publicando en SO con una buena reputación indica que probablemente sepa lo suficiente como para evitar el modo peculiaridades ... pero la única pregunta estúpida es una que no se hace. ... y el de los periquitos, obviamente.
David dice reinstalar a Monica
1
Acabo de probar en FF 3.5 e IE8; ambos ocultan la fila con pantalla: ninguna
17 del 26 de

Respuestas:

37

Realmente me gustaría ver el estilo de su TABLE. Por ejemplo, "colapso de la frontera"

Solo una suposición, pero podría afectar la forma en que se representan las filas 'ocultas'.

OK W
fuente
2
¡Gracias! Ese era el estilo que faltaba.
MikeN
100

¿Puedes incluir algún código? Agrego style="display:none;"filas a mi tabla todo el tiempo y efectivamente oculta toda la fila.

Calvin
fuente
trabajó para mi. Estaba tratando de configurar la visibilidad: oculta antes :(
Toadums
Todavía hay espacio: /
fatuhoku
cómo evitar que esto cambie el ancho de la tabla cuando muestra ocultar filas, no quiero arreglar el diseño de la tabla
PirateApp
57

Puede configurarlo <tr id="result_tr" style="display: none;">y luego mostrarlo de nuevo con JavaScript:

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';
Jamshid Hashimi
fuente
5
¡Frio! esto es lo que estaba buscando :)
kmario23
4
¡¡Gracias!! Esconderse fue fácil, pero traerlos de vuelta resultó problemático.
Jefferey Cave
esto cambia el ancho de la tabla, estoy haciendo un filtro donde las filas deben mostrarse ocultas según lo que está dentro del cuadro de búsqueda
PirateApp
13

Pensé que agregaría a esto una posible otra solución:

<tr style='visibility:collapse'><td>stuff</td></tr>

Solo lo probé en Chrome, pero lo puse en el <tr> oculta de la fila MÁS todas las celdas dentro de la fila aún contribuyen al ancho de las columnas. A veces, hago una fila adicional en la parte inferior de una tabla con solo algunos espaciadores que hacen que ciertas columnas no puedan tener un ancho menor, luego oculto la fila usando este método. (Sé que se supone que debes poder hacer esto con otros CSS, pero nunca logré que eso funcione)

Nuevamente, estoy en un entorno puramente Chrome, por lo que no tengo idea de cómo funciona esto en otros navegadores.

rgbflawed
fuente
1
Esto funciona en la mayoría de los navegadores modernos, con la notable excepción de Safari, que muestra espacios en blanco en lugar de ocultar la fila: developer.mozilla.org/en-US/docs/Web/CSS/visibility
Oscar Scholten
8

Si display: none;no funciona, ¿qué tal si lo configuramos height: 0;? ¿Junto con un margen negativo (igual o mayor que la altura de los bordes superior e inferior, si corresponde) para eliminar aún más el elemento? No creo que eso position: absolute; top: 0; left: -4000px;funcione, pero valdría la pena intentarlo.

Por mi parte, el uso display: nonefunciona bien.

David dice reinstalar a Monica
fuente
4

Agregue algunos de los siguientes line-height: 0px; font-size: 0px; height: 0px; margin: 0; padding: 0;

Olvidé cuál lo hace. Creo que es la altura de la línea para IE6.

s_hewitt
fuente
4

Estaba teniendo el mismo problema, incluso agregué style = "display: none" a cada celda.

Al final usé comentarios HTML <!-- [HTML] -->

Simon Hughes
fuente
4

Puede usar la visualización de estilo: none con tr para ocultar y funcionará con todos los navegadores.

Shahid Siddique
fuente
3
var result_style = document.getElementById('result_tr').style;
result_style.display = '';

funciona perfectamente para mí ..

Vignesh
fuente
2

Esto me pasó a mí y me desconcertó el por qué. Luego me di cuenta de que si eliminaba cualquier nbsp; tenía dentro de las filas, entonces las filas no ocuparon ningún espacio.

Kevin H
fuente
-1

Debe poner el cambio del tipo de entrada a oculto, todas las funciones funcionan pero no está visible en la página

<input type="hidden" name="" id="" value="">

siempre que el tipo de entrada esté establecido en ese, puede cambiar el resto. ¡¡Buena suerte!!

usuario5431987
fuente
-3

Estaba teniendo el mismo problema y lo resolví. El CSS anterior estaba desbordado: oculto; índice z: 999999;

Lo cambio a desbordamiento: visible;

Ray Innov
fuente
-3

HTML:

<input type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction</input>

JavaScript:

function updateMap() {
     map.setOptions({'styles': getStyles() });
} 

function getStyles() {
    var styles = [];
    for (var i=0; i < types.length; i++) {
      var style = {};
      var type = types[i];
      var enabled = document.getElementById(type).checked;
      style['featureType'] = 'poi.' + type;
      style['elementType'] = 'labels';
      style['stylers'] = [{'visibility' : (enabled ? 'on' : 'off') }];
      styles.push(style);
    }
    return styles;
}
alpc
fuente
-5

position: absolute lo eliminará del flujo de diseño y debería resolver su problema: el elemento permanecerá en el DOM pero no afectará a otros.

usuario2415617
fuente
fwiw, creo que esta es una gran solución si desea ocultar una columna, en algunas situaciones específicas. además agregueopacity: 0
Grapho
-5

Puede configurar

<table>
  <tr style="visibility: hidden"></tr>
</table> 
Ramy dijo
fuente
5
Con visibility: hidden;el elemento aún ocupará espacio, esa es la diferencia entre las propiedades visibilityydisplay
Dmitry Pashkevich
Úselo así<table><tr style="display: none;"><td></td></tr></table>
Sanu