css - attribute - cómo volver a la normalidad después de la visualización: ninguno para la fila de la tabla

fieldset css

Question

Básicamente, tengo una mesa. Onload, configuré cada fila de la tabla para display:none ya que tengo que realizar un gran número de procesos de javascript y no quiero que el usuario la vea mientras se está realizando. He configurado un temporizador para mostrarlo después de un tiempo, mi problema es que no puedo hacer que la fila de la tabla se muestre como una fila de la tabla. Si configuro display:block , simplemente no se alinearía con los encabezados (th). La única solución que he encontrado es display: table-row de css2, pero es decir, 7 y siguientes no son compatibles con esta declaración.

¿Alguna solución?

Answer 1

Revertir valor a predeterminado:

display: unset;

Answer 2

¿Por qué no pones la tabla en un div, haces que la pantalla de div no tenga none , y cuando el proceso está hecho, configura la pantalla de div para block o inline block o lo que sea que necesites ...

Answer 3

Al cambiar entre ocultarse y mostrar TRs usando toggleClass, lo siguiente funcionará:

display:none;

y

display: table-row;

P.ej

$(''#the_tr_id'').toggleClass(''tr_show'',''tr_hide'');

Dónde:

.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}

Answer 4

IE7 y abajo usan display: block para elementos de tabla; los otros navegadores usan correctamente table-row table-cell etc.

Si bien puedes explorar el navegador y elegir diferentes valores de visualización, es mucho más fácil ocultar una fila indirectamente. Agregue una regla de hoja de estilo como:

.hidden { display: none; }

y luego cambie el nombre de clase del elemento de fila para incluir o no la clase hidden . Cuando se elimine la clase, el estilo de display volverá a su valor predeterminado, cualquiera que esté en el navegador actual.

También puede usar selectores de contención para ocultar múltiples elementos dentro de un elemento, luego hacer que todos sean visibles / ocultos a la vez cambiando una clase. Esto es más rápido que actualizar cada style separado.

Tengo mucho procesamiento de JavaScript por hacer y no quiero que el usuario lo vea mientras se está realizando.

Por lo general, no lo harán de todos modos. Por lo general, los cambios no aparecen en la pantalla hasta que el control ha pasado de nuevo su código al navegador.

Answer 5

Tal vez no sea aplicable en todas partes, pero ...
Use un elemento principal (por ejemplo, <div> o algo similar) con la pantalla deseada y establezca la visualización para inherit en el programa. al igual que:

function toggleDisplay(){
  $(''#targetElement'').toggleClass(''hide'');
  $(''#targetElement'').toggleClass(''show'');
}

#targetElement{
  width:100px;
  height:100px;
  background-color:red;
}

.hide{
  display:none;
}

.show{
  display:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="intermediateElement" style="display:inline-block">
  <div id="targetElement" class="show"></div>
</div>

<button onclick="toggleDisplay()">Toggle</button>

Answer 6

Use la visibilidad en lugar de la pantalla para su caso.

visibilidad: oculta;

después de la carga

visibilidad: visible;

descubre más here

Answer 7

establece la visualización en una cadena vacía: esto permitirá que la fila use su valor de visualización predeterminado y así funciona en todos los navegadores