¿Cómo ocultar columnas en una tabla HTML?

Question 1

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

Question 2

Debe utilizar la hoja de estilo para este propósito.

<td style="display:none;">

Question 3

Puede usar el nth-childselector de CSS para ocultar una columna completa:

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

Esto funciona bajo el supuesto de que una celda de la columna N (ya sea una thotd ) es siempre el enésimo elemento hijo de su fila.

Aquí tienes una demostración.

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

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

Demostración con jQuery

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

Question 4

también puedes usar:

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

La diferencia entre ellos es que "oculta" oculta la celda pero retiene el espacio pero con "colapso" el espacio no se mantiene como display: none. Esto es importante cuando se oculta una columna o fila completa.

Question 5

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 (hojas de estilo en cascada) pondrá en cascada atributos a todos sus elementos secundarios. Esto significa que *:nth-child(1)ocultará el primero tdde cada tr Y ocultará el primer elemento de todos los tdhijos. Si alguno de sustd tiene cosas como botones, íconos, entradas o selecciones, el primero estará oculto (¡vaya!).

Incluso si actualmente no tiene cosas que estarán ocultas, imagínese su frustración en el futuro si necesita agregar una. No castigue así a su yo futuro, ¡será un fastidio depurarlo!

Mi respuesta solo ocultará el primero tdy thtodo trpara #myTablemantener seguros sus otros elementos.

Question 6

La gente de Bootstrap usa la .hiddenclase <td>.

Question 7

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

Question 8

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

Expandir fragmento

use .hideFullColumn en la tabla y .hidecol en th. No es necesario agregar la clase en td individualmente, ya que será un problema porque el índice puede no estar en la mente de cada td.

Question 9

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 tener ese estilo.

Question 10

<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

Answer 1

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

Answer 2

171

Debe utilizar la hoja de estilo para este propósito.

<td style="display:none;">

Anuraj
fuente

1

¿Qué pasa con solo la primera columna usando css de html

oficina 302

¿Cómo debo agregarle estilo cuando estoy haciendo una tabla usando javascript createelement (td);

oficina 302

1

@ office302 ¿Aplicar este estilo solo al primer td? O desea usar solo CSS - Esto puede hacer algo como estotd:first-child { display:none; }

Anuraj

@Anuraj debe tenerse en cuenta que: primer hijo, etc. son compatibles> IE 11 y Edge, bueno de todos modos

Vitaliy Terziev

Answer 3

1

¿Qué pasa con solo la primera columna usando css de html

oficina 302

Answer 4

¿Cómo debo agregarle estilo cuando estoy haciendo una tabla usando javascript createelement (td);

oficina 302

Answer 5

1

@ office302 ¿Aplicar este estilo solo al primer td? O desea usar solo CSS - Esto puede hacer algo como estotd:first-child { display:none; }

Anuraj

Answer 6

@Anuraj debe tenerse en cuenta que: primer hijo, etc. son compatibles> IE 11 y Edge, bueno de todos modos

Vitaliy Terziev

Answer 7

88

Puede usar el nth-childselector de CSS para ocultar una columna completa:

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

Esto funciona bajo el supuesto de que una celda de la columna N (ya sea una thotd ) es siempre el enésimo elemento hijo de su fila.

Aquí tienes una demostración.

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

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

Demostración con jQuery

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

Kos
fuente

1

Esto puede tener efectos secundarios dañinos; consulte mi respuesta a continuación para obtener una solución mejorada.

Rick Smith

@RickSmith Buen punto. Actualicé mi publicación para evitar el problema de otra manera (usando el selector de niños).

Kos

El selector de niños es definitivamente mejor. Buena respuesta.

Rick Smith

Buena solución, pero necesita un poco más de consideración en el caso de colspan.

Cinoss

Answer 8

1

Esto puede tener efectos secundarios dañinos; consulte mi respuesta a continuación para obtener una solución mejorada.

Rick Smith

Answer 9

@RickSmith Buen punto. Actualicé mi publicación para evitar el problema de otra manera (usando el selector de niños).

Kos

Answer 10

El selector de niños es definitivamente mejor. Buena respuesta.

Rick Smith

Answer 11

Buena solución, pero necesita un poco más de consideración en el caso de colspan.

Cinoss

Answer 12

30

también puedes usar:

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

La diferencia entre ellos es que "oculta" oculta la celda pero retiene el espacio pero con "colapso" el espacio no se mantiene como display: none. Esto es importante cuando se oculta una columna o fila completa.

Dov Miller
fuente

1

Descubrí que para las etiquetas div, el colapso también mantendrá el espacio. Para las etiquetas div, tendría que usar display: none; para colapsar verdaderamente y no retener el espacio.

Dov Miller

5

visibility: collapseestá diseñado específicamente para manejar la visualización / ocultación de celdas, ya que hay una diferencia al recalcular el ancho / alto de la celda entre este y display:none. Ver developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

Answer 13

1

Descubrí que para las etiquetas div, el colapso también mantendrá el espacio. Para las etiquetas div, tendría que usar display: none; para colapsar verdaderamente y no retener el espacio.

Dov Miller

Answer 14

5

visibility: collapseestá diseñado específicamente para manejar la visualización / ocultación de celdas, ya que hay una diferencia al recalcular el ancho / alto de la celda entre este y display:none. Ver developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

Answer 15

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 (hojas de estilo en cascada) pondrá en cascada atributos a todos sus elementos secundarios. Esto significa que *:nth-child(1)ocultará el primero tdde cada tr Y ocultará el primer elemento de todos los tdhijos. Si alguno de sustd tiene cosas como botones, íconos, entradas o selecciones, el primero estará oculto (¡vaya!).

Incluso si actualmente no tiene cosas que estarán ocultas, imagínese su frustración en el futuro si necesita agregar una. No castigue así a su yo futuro, ¡será un fastidio depurarlo!

Mi respuesta solo ocultará el primero tdy thtodo trpara #myTablemantener seguros sus otros elementos.

Answer 16

10

La gente de Bootstrap usa la .hiddenclase <td>.

theapache64
fuente

Answer 17

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 18

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

Expandir fragmento

use .hideFullColumn en la tabla y .hidecol en th. No es necesario agregar la clase en td individualmente, ya que será un problema porque el índice puede no estar en la mente de cada td.

Answer 19

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 tener ese estilo.

Answer 20

0

<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

Albert
fuente

2

Espero que resuelva el problema, pero agregue una explicación de su código para que el usuario comprenda perfectamente lo que realmente quiere.

Jaimil Patel

Answer 21

2

Espero que resuelva el problema, pero agregue una explicación de su código para que el usuario comprenda perfectamente lo que realmente quiere.

Jaimil Patel

¿Cómo ocultar columnas en una tabla HTML?

Respuestas: