Ho creato una tabella in ASPX. Voglio nascondere una delle colonne in base al requisito ma non ci sono attributi come visiblenella creazione di tabelle HTML. Come posso risolvere il mio problema?
Ho creato una tabella in ASPX. Voglio nascondere una delle colonne in base al requisito ma non ci sono attributi come visiblenella creazione di tabelle HTML. Come posso risolvere il mio problema?
Risposte:
È necessario utilizzare il foglio di stile per questo scopo.
<td style="display:none;">td:first-child { display:none; }
Puoi utilizzare il nth-childselettore CSS per nascondere un'intera colonna:
#myTable tr > *:nth-child(2) {
display: none;
}Questo funziona assumendo che una cella della colonna N (sia essa un thotd ) sia sempre l'ennesimo elemento figlio della sua riga.
Se vuoi che il numero di colonna sia dinamico, puoi farlo utilizzando querySelectorAllo qualsiasi framework che presenti funzionalità simili, come jQueryqui:
$('#myTable tr > *:nth-child(2)').hide();(La soluzione jQuery funziona anche su browser legacy che non supportanonth-child ).
puoi anche usare:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">La differenza tra loro che "nascosto" nasconde la cella ma trattiene lo spazio ma con "collassa" lo spazio non si tiene come display: nessuno. Ciò è significativo quando si nasconde un'intera colonna o riga.
visibility: collapseè progettato specificamente per gestire la visualizzazione / occultamento delle celle, poiché c'è una differenza quando si ricalcola la larghezza / altezza della cella tra questo e display:none. Vedi developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
La risposta di Kos è quasi giusta, ma può avere effetti collaterali dannosi. Questo è più corretto:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}CSS (Cascading Style Sheets) distribuirà attributi a cascata a tutti i suoi figli. Ciò significa che *:nth-child(1)nasconderà il primo tddi ogni tr AND nasconderà il primo elemento di tutti i tdfigli. Se uno dei tuoi filetd ha cose come pulsanti, icone, ingressi o selezioni, il primo sarà nascosto (woops!).
Anche se non si attualmente dispone di cose che sarà nascosto, l'immagine della vostra frustrazione lungo la strada se avete bisogno di aggiungere uno. Non punire il tuo sé futuro in questo modo, sarà un dolore fare il debug!
La mia risposta nasconderà solo il primo tde thsu tutti trper #myTablemantenere gli altri elementi al sicuro.
Le persone Bootstrap usano la .hiddenclasse <td>.
Puoi anche nascondere una colonna usando l'elemento col https://developer.mozilla.org/en/docs/Web/HTML/Element/col
Per nascondere la seconda colonna in una tabella:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>Problemi noti: non funzionerà in Google Chrome. Si prega di votare per il bug su https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>usa .hideFullColumn nella tabella e .hidecol in th. Non è necessario aggiungere la classe in td individualmente poiché sarà un problema perché index potrebbe non essere in mente per ogni td.
Puoi anche fare ciò che vs dev suggerisce a livello di programmazione assegnando lo stile con Javascript iterando attraverso le colonne e impostando l'elemento td su un indice specifico per avere quello stile.
<!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);