J'ai créé une table dans ASPX. Je souhaite masquer l'une des colonnes en fonction de l'exigence, mais il n'y a pas d'attribut comme visibledans la construction de la table HTML. Comment puis-je résoudre mon problème?
J'ai créé une table dans ASPX. Je souhaite masquer l'une des colonnes en fonction de l'exigence, mais il n'y a pas d'attribut comme visibledans la construction de la table HTML. Comment puis-je résoudre mon problème?
Réponses:
Vous devez utiliser la feuille de style à cet effet.
<td style="display:none;">td:first-child { display:none; }
Vous pouvez utiliser le nth-childsélecteur CSS pour masquer une colonne entière:
#myTable tr > *:nth-child(2) {
display: none;
}Cela fonctionne sous l'hypothèse qu'une cellule de la colonne N (que ce soit th ou td) est toujours le Nième élément enfant de sa ligne.
Si vous voulez que le numéro de colonne soit dynamique, vous pouvez le faire en utilisant querySelectorAllou tout autre framework présentant des fonctionnalités similaires, comme jQueryici:
$('#myTable tr > *:nth-child(2)').hide();(La solution jQuery fonctionne également sur les navigateurs hérités qui ne prennent pas en chargenth-child ).
vous pouvez aussi utiliser:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">La différence entre eux que «caché» cache la cellule mais il contient l'espace mais avec «réduire» l'espace n'est pas tenu comme affichage: aucun. Ceci est important lorsque vous masquez une colonne ou une ligne entière.
visibility: collapseest conçu spécifiquement pour gérer l'affichage / le masquage des cellules, car il existe une différence lors du recalcul de la largeur / hauteur de la cellule entre ceci et display:none. Voir developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
La réponse de Kos est presque juste, mais peut avoir des effets secondaires néfastes. C'est plus correct:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}CSS (Feuilles de style en cascade) va mettre en cascade des attributs à tous ses enfants. Cela signifie que *:nth-child(1)cela masquera le premier tdde chaque tr ET masquera le premier élément de tous les tdenfants. Si l'un de vos tdéléments comporte des boutons, des icônes, des entrées ou des sélections, le premier sera masqué (woops!).
Même si vous n'avez actuellement aucun élément qui sera caché, imaginez votre frustration plus tard si vous devez en ajouter un. Ne punissez pas votre futur moi comme ça, ça va être difficile à déboguer!
Ma réponse ne cachera que le premier tdet thle tout tren #myTablegardant vos autres éléments en sécurité.
Les gens de Bootstrap utilisent la .hiddenclasse sur <td>.
Vous pouvez également masquer une colonne à l'aide de l'élément col https://developer.mozilla.org/en/docs/Web/HTML/Element/col
Pour masquer la deuxième colonne d'un tableau:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>Problèmes connus: cela ne fonctionnera pas dans Google Chrome. Veuillez voter pour le bogue sur https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>utilisez .hideFullColumn dans la table et .hidecol dans th.
Vous pouvez également faire ce que vs dev suggère par programme en attribuant le style avec Javascript en itérant dans les colonnes et en définissant l'élément td à un index spécifique pour avoir ce style.
<!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);