Come posso nascondere una riga della tabella HTML in <tr>
modo che non occupi spazio? Ne ho diversi <tr>
impostati su style="display:none;"
, ma influenzano comunque la dimensione della tabella e il bordo della tabella riflette le righe nascoste.
Come posso nascondere una riga della tabella HTML in <tr>
modo che non occupi spazio? Ne ho diversi <tr>
impostati su style="display:none;"
, ma influenzano comunque la dimensione della tabella e il bordo della tabella riflette le righe nascoste.
Risposte:
Puoi includere del codice? Aggiungo sempre style="display:none;"
righe alla mia tabella e nasconde effettivamente l'intera riga.
Puoi impostarlo <tr id="result_tr" style="display: none;">
e mostrarlo di nuovo con JavaScript:
var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';
Ho pensato di aggiungere a questo una potenziale altra soluzione:
<tr style='visibility:collapse'><td>stuff</td></tr>
L'ho provato solo su Chrome ma inserendolo nelle <tr>
nasconde la riga PIÙ tutte le celle all'interno della riga contribuiscono ancora alle larghezze delle colonne. A volte creo una riga in più nella parte inferiore di una tabella con solo alcuni spaziatori che fanno sì che alcune colonne non possano essere inferiori a una certa larghezza, quindi nascondo la riga usando questo metodo. (So che dovresti essere in grado di farlo con altri CSS ma non l'ho mai fatto funzionare)
Di nuovo, sono in un ambiente puramente Chrome, quindi non ho idea di come funzioni in altri browser.
Se display: none;
non funziona, che ne dici di impostare height: 0;
invece? Insieme a un margine negativo (uguale o superiore all'altezza dei bordi superiore e inferiore, se presente) per rimuovere ulteriormente l'elemento? Non immagino che position: absolute; top: 0; left: -4000px;
funzionerebbe, ma potrebbe valere la pena provare.
Da parte mia, l'uso display: none
funziona bene.
Stavo riscontrando lo stesso problema, ho persino aggiunto style = "display: none" a ogni cella.
Alla fine ho usato commenti HTML
<!-- [HTML] -->
Puoi usare lo stile di visualizzazione: nessuno con tr per nascondere e funzionerà con tutti i browser.
Devi mettere la modifica del tipo di input su nascosto, tutte le sue funzioni funzionano ma non è visibile nella pagina
<input type="hidden" name="" id="" value="">
fintanto che il tipo di input è impostato su quello è possibile modificare il resto. In bocca al lupo!!
HTML:
<input type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction</input>
JavaScript:
function updateMap() {
map.setOptions({'styles': getStyles() });
}
function getStyles() {
var styles = [];
for (var i=0; i < types.length; i++) {
var style = {};
var type = types[i];
var enabled = document.getElementById(type).checked;
style['featureType'] = 'poi.' + type;
style['elementType'] = 'labels';
style['stylers'] = [{'visibility' : (enabled ? 'on' : 'off') }];
styles.push(style);
}
return styles;
}
position: absolute
lo rimuoverà dal flusso di layout e dovrebbe risolvere il tuo problema: l'elemento rimarrà nel DOM ma non influenzerà gli altri.
opacity: 0
Puoi impostare
<table>
<tr style="visibility: hidden"></tr>
</table>
visibility: hidden;
l'elemento ci vorrà ancora spazio, questa è la differenza tra visibility
e display
proprietà
<table><tr style="display: none;"><td></td></tr></table>