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?
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?
Respuestas:
Debe utilizar la hoja de estilo para este propósito.
<td style="display:none;">td:first-child { display:none; }
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.
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();(La solución jQuery también funciona en navegadores heredados que no son compatiblesnth-child ).
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.
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
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.
La gente de Bootstrap usa la .hiddenclase <td>.
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
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>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.
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.
<!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);