2010-03-21 11 views
7

la seguente pagina:alternativa alla visibilità: il collasso non funziona su IE e Chrome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<STYLE type="text/css"> 
tr.cccc { 
visibility: collapse; 
} 
</STYLE> 
<BODY> 
<TABLE border="1"> 
<TR class="cccc"> 
<TD>one</TD> 
</TR> 
</TABLE> 
</BODY> 
</HTML> 

opere solo in Firefox. IE visualizza sempre la riga e Chrome nasconde la riga ma mostra il suo spazio verticale. Quindi, come posso nascondere completamente una riga usando solo i CSS?

+3

Hai provato "' display: none; '"? –

+0

Sembra funzionare! Grazie mille! – tic

+0

È un po 'tardi ma puoi farlo funzionare su Chrome [in questo modo] (http://stackoverflow.com/questions/25807564/ nascondendo-a-tr-while-still-involving-it-in-width- calcoli/25807729 # 25807729) –

risposta

14

Usa
display: none

invece di visibilità: crollo

Funziona per me per nascondere la griglia riga di riepilogo albero dojo in IE6 & Google Chrome

+4

Sfortunatamente, 'display: none;' fa sì che le righe e le celle vengano ignorate allo scopo di calcolare rowspan e colspan in almeno alcuni browser, facendo sì che i layout di tabella con rowspan e colspan diventino vistosi. – daveidmx

+0

L'impostazione della visibilità su visibile lo farà apparire? O dovrò sbarazzarmi anche del display. – SoftwareSavant

1

visibility: collapse non funziona in IE. Source sembra che sarà necessario utilizzare hidden invece per IE. Vedi la pagina collegata per i dettagli.

Tuttavia, la specifica indica chiaramente che nel caso di colonne, solo il collasso è un valore valido. la compressione è supportata solo da Firefox. Poiché Explorer Windows supporta comunque tutte le dichiarazioni di stile sulle colonne, supporta anche la visibilità: nascosta.

Inoltre, non fa male a dare costrutto una struttura HTML completo:

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
<STYLE type="text/css"> 
.... 
</STYLE> 
</HEAD> 
... 
+0

No, non funziona. – tic

+0

@tic ha aggiornato la mia risposta. –

+1

Conosco già il valore nascosto della proprietà di visibilità. Nascosto non è la soluzione giusta per il mio problema. Voglio che la riga scompaia completamente: cioè, non deve mostrare uno spazio vuoto. Nasconde i dati nascosti, MA mantiene lo spazio verticale. Collapse nasconde i dati E rimuove lo spazio occupato dalla riga, come se non fosse affatto lì. – tic

0

E 'obsoleto, ma puoi usare innerHTML per riscrivere le parti che vuoi "sparire".

0

Bene sembra che visibility: collapse possa essere utilizzato anche in IE. Lo sto usando e funziona sia in IE che in Firefox. Non so su altri browser oltre a questi due.

ho fatto quanto segue:

HTML:

<table class="intValidationTable">

<tr class="rangeTR" style="visibility: collapse;">

<tr class="listTR" style="visibility: collapse;">

Javascript + Jquery:

var rows = $('table.intValidationTable tr');

var rangeTR = rows.filter('.rangeTR');

var listTR = rows.filter('.listTR');

rangeTR.css("visibility", "visible");

listTR.css("visibility", "collapse");

Questo dovrebbe funzionare!