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?¿Cómo ocultar columnas en la tabla HTML?
Debe utilizar la Hoja de estilos para este fin.
<td style="display:none;">
También puede hacer lo que sugiere vs dev programación asignando el estilo con Javascript por iteración a través de las columnas y ajustar el elemento td a un índice específico para tener ese estilo.
también se puede utilizar:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
La diferencia entre ellos que "oculta" esconde la célula pero mantiene el espacio pero con "colapso" del espacio no se lleva a cabo como display: none. Esto es significativo cuando se oculta una columna o fila completa.
gracias por compartir este sencillo truco. – KristCont
He encontrado que para las etiquetas div colapso también mantendrá el espacio. Para las etiquetas div, debe usar display: none; para colapsar verdaderamente y no mantener el espacio. –
'visibility: collapse' está diseñado específicamente para la manipulación/ocultación de celdas, ya que existe una diferencia al volver a calcular el ancho/alto de la celda entre esto y' display: none'. Consulte https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values – SteveB
Puede utilizar el selector de nth-child CSS para ocultar una columna entera:
#myTable tr > *:nth-child(2) {
display: none;
}
Esto funciona bajo el supuesto de que una celda de la columna N (ya sea un th o td) es siempre el elemento hijo enésimo de su fila.
Si desea que el número de columna sea dinámico, que podría hacer que el uso de querySelectorAll o cualquier marco que presenta una funcionalidad similar, como jQuery aquí:
$('#myTable tr > *:nth-child(2)').hide();
(La solución jQuery también funciona en legacy browsers that don't support nth-child).
Esto puede tener efectos secundarios dañinos, consulte [mi respuesta a continuación] (http://stackoverflow.com/a/29500414/616644) para una solución mejorada. –
@RickSmith Buen punto. Actualicé mi publicación para evitar el problema de otra manera (usando el selector de elementos secundarios). – Kos
selector de niños es definitivamente mejor. Buena respuesta. –
La respuesta de Kos es casi correcta, pero puede tener efectos secundarios perjudiciales. Esto es más correcto:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS (Cascading Style Sheets) se cascada atributos a todos sus hijos. Esto significa que *:nth-child(1) ocultará el primer td de cada trY ocultar el primer elemento de todos los td secundarios. Si cualquiera de sus td tiene elementos como botones, iconos, entradas o selecciones, el primero estará oculto (¡woops!).
Incluso si no lo hace actualmente 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 sólo ocultará la primera td y th sobre todo en tr#myTable manteniendo los otros elementos de seguridad.
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>uso .hideFullColumn en la tabla y en .hidecol th.You no es necesario agregar la clase en td forma individual, ya que será un problema porque el índice no puede estar en la mente de cada td .
La gente de Bootstrap usa la clase .hidden en <td>.
También puede ocultar una columna utilizando 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. Por favor, vote por el error al https://bugs.chromium.org/p/chromium/issues/detail?id=174167
¿qué pasa solo con el primer coloumn usando css of html –
cómo debería agregarle estilo cuando estoy creando una tabla usando javascript createelement (td); –
@ office302 ¿Aplicar este estilo solo a la primera td? O desea usar solo CSS: puede hacer algo como esto 'td: first-child { display: none; } ' – Anuraj