tablas - ¿Cómo ocultar columnas en la tabla HTML?

ocultar td javascript

Question

He creado una tabla en ASPX. Quiero ocultar una de las columnas según el requisito, pero no hay ningún atributo como visible en la creación de la tabla HTML. ¿Cómo puedo resolver mi problema?

Answer 1

La gente de Bootstrap usa la clase .hidden en <td> .

Answer 2

La respuesta de Kos es casi correcta, pero puede tener efectos secundarios dañinos. Esto es más correcto:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (Cascading Style Sheets) aplicará atributos en cascada a todos sus elementos secundarios. Esto significa que *:nth-child(1) ocultará la primera td de cada tr Y ocultará el primer elemento de todos los td hijos. Si alguno de sus td tiene botones, íconos, entradas o selecciones, el primero estará oculto (¡woops!).

Incluso si actualmente no tiene cosas que se ocultarán, visualice su frustración en el futuro si necesita agregar una. No castigue a su yo futuro de esa manera, va a ser una pena depurarlo.

Mi respuesta solo ocultará el primer td y th en todos los tr en #myTable mantiene sus otros elementos a salvo.

Answer 3

Necesita usar la Hoja de Estilo para este propósito.

<td style="display:none;">

Answer 4

Puede usar el selector CSS nth-child para ocultar una columna completa:

#myTable tr > *:nth-child(2) {
    display: none;
}

Esto funciona bajo la suposición de que una celda de la columna N (ya sea th o td ) es siempre el enésimo elemento hijo de su fila.

Aquí hay una demostración.

Si desea que el número de columna sea dinámico, puede hacerlo utilizando querySelectorAll o cualquier marco que presente una funcionalidad similar, como jQuery aquí:

$(''#myTable tr > *:nth-child(2)'').hide();

Demostración con jQuery

(La solución jQuery también funciona en navegadores heredados que no admiten nth-child ).

Answer 5

También puede hacer lo que vs dev sugiere programáticamente asignando el estilo con Javascript iterando a través de las columnas y configurando el elemento td en un índice específico para que tenga ese estilo.

Answer 6

También puede ocultar una columna usando el elemento col https://developer.mozilla.org/en/docs/Web/HTML/Element/col

Para ocultar la segunda columna en una tabla:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

Problemas conocidos: esto no funcionará en Google Chrome. Vote por el error en https://bugs.chromium.org/p/chromium/issues/detail?id=174167

Answer 7

también puedes usar:

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

La diferencia entre ellos que "oculta" oculta la celda pero contiene el espacio pero con "colapso" el espacio no se mantiene como pantalla: ninguno. Esto es significativo cuando se oculta una columna o fila completa.

Answer 8

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

use .hideFullColumn en la tabla y .hidecol en th. No necesita agregar clases en td individualmente, ya que será un problema porque el índice puede no estar presente en cada td.