Come posso nascondere una riga della tabella HTML <tr> in modo che non occupi spazio?


105

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.


2
Vengono ripetutamente mostrati / nascosti? O quando sono nascosti, sono effettivamente spariti per sempre? Perché potresti usare javascript per rimuovere solo la riga e probabilmente risolverebbe il tuo problema.
brettkelly,

Desidero farli iniziare come nascosti e poi mostrarli se l'utente fa clic su un pulsante per "mostrare di più". Quando sono nascosti, non voglio che occupino spazio verticale.
MikeN

ho avuto lo stesso problema, se rimuovi () la riga con javascript, occupa ancora spazio in IE6. niente da fare schifoso IE
mkoryak

1
Quale doctype stai usando? Accetto che il semplice fatto che stai postando su SO con una buona reputazione indica che probabilmente ne sai abbastanza per evitare la modalità stranezze ... ma l'unica domanda stupida è quella che non viene posta. ... e quella sui pappagallini, ovviamente.
David dice di reintegrare Monica il

1
Ho appena provato in FF 3.5 e IE8 - entrambi nascondono la riga con display: nessuno
17 del 26

Risposte:


37

Mi piacerebbe molto vedere lo stile del tuo TAVOLO. Ad esempio "border-collapse"

È solo una supposizione, ma potrebbe influenzare il modo in cui vengono visualizzate le righe "nascoste".


2
Grazie! Quello era lo stile mancante.
MikeN

100

Puoi includere del codice? Aggiungo sempre style="display:none;"righe alla mia tabella e nasconde effettivamente l'intera riga.


ha funzionato per me. Stavo cercando di impostare la visibilità: nascosto prima :(
Toadums

C'è ancora spazio: /
fatuhoku

come evitare che questo modifichi la larghezza della tabella quando mostri le righe nascoste, non voglio che il layout della tabella sia corretto
PirateApp

57

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';

5
Freddo! questo è quello che stavo cercando :)
kmario23

4
Grazie!! Nascondersi era facile, ma riportarli indietro si stava rivelando problematico.
Jefferey Cave

questo cambia la larghezza della tabella, sto facendo un filtro in cui le righe devono essere mostrate nascoste in base a cosa c'è nella casella di ricerca
PirateApp

13

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.


1
Funziona nella maggior parte dei browser moderni, con la notevole eccezione di Safari, che rende gli spazi vuoti anziché nascondere la riga: developer.mozilla.org/en-US/docs/Web/CSS/visibility
Oscar Scholten

8

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: nonefunziona bene.


4

Aggiungi alcuni dei seguenti line-height: 0px; font-size: 0px; height: 0px; margin: 0; padding: 0;

Ho dimenticato quale lo fa. Penso che sia l'altezza della linea per IE6.


4

Stavo riscontrando lo stesso problema, ho persino aggiunto style = "display: none" a ogni cella.

Alla fine ho usato commenti HTML <!-- [HTML] -->


4

Puoi usare lo stile di visualizzazione: nessuno con tr per nascondere e funzionerà con tutti i browser.


3
var result_style = document.getElementById('result_tr').style;
result_style.display = '';

funziona perfettamente per me ..


2

Questo è successo a me e sono rimasto perplesso sul perché. Poi ho notato che se ho rimosso qualsiasi nbsp; avevo all'interno delle righe, quindi le righe non occupavano spazio.


-1

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!!


-3

Avevo lo stesso problema e ho risolto il problema. Il CSS precedente era in overflow: nascosto; z-index: 999999;

Lo cambio in overflow: visibile;


-3

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;
}

-5

position: absolute lo rimuoverà dal flusso di layout e dovrebbe risolvere il tuo problema: l'elemento rimarrà nel DOM ma non influenzerà gli altri.


fwiw Penso che questa sia un'ottima soluzione se vuoi nascondere una colonna, in alcune situazioni specifiche. in aggiunta aggiungiopacity: 0
Grapho

-5

Puoi impostare

<table>
  <tr style="visibility: hidden"></tr>
</table> 

5
Con visibility: hidden;l'elemento ci vorrà ancora spazio, questa è la differenza tra visibilitye displayproprietà
Dmitry Pashkevich

Usa in questo modo<table><tr style="display: none;"><td></td></tr></table>
Sanu
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.