CSS per far apparire il bordo di una cella vuota?

Quale CSS dovrei usare per far apparire il bordo di una cella anche se la cella è vuota?

IE 7 in particolare.

Se ricordo, la cella non esiste in alcuni IE a meno che non sia riempita con qualcosa …

Se riesci a mettere un   (spazio non di rottura) per riempire il vuoto, che di solito funziona. O hai bisogno di una soluzione CSS pura?

Apparentemente, IE8 mostra le celle di default, e devi nasconderle con empty-cells:hide Ma non funziona affatto in IE7 (che si nasconde di default).

Un altro modo per accertarsi che ci siano dati in tutte le celle:

  $(document).ready(function() { $("td:empty").html(" "); }); 

Se si imposta la proprietà border-collapse per collapse , IE7 mostrerà celle vuote. Inoltre, collassa i bordi anche se questo potrebbe non essere al 100% quello che vuoi

 td { border: 1px solid red; } table { border-collapse: collapse; }   Border-collapse Test  
 
test test
test test
test test
test

La domanda ha richiesto una soluzione CSS, ma nella remota possibilità che una soluzione HTML possa fare, eccone una:

Prova ad aggiungere questi due attributi all’elemento table: frame = “box” rules = “all” come questo:

 

Ho appena trovato il seguente. È conforms agli standard ma non funziona in IE. sospiro.

 empty-cells: show 

Mi sono imbattuto in questa domanda e non ho visto nessuna risposta che abbia veramente affrontato il problema.

Il problema si verifica perché IE7 non vede alcun contenuto interno per la cella; in termini di programmazione, la cella risulta null e, come la maggior parte delle cose, non è ansible limitare un valore null o eseguire un’azione su di esso. Il browser ha bisogno di un elemento / object che ha un layout, in modo da applicare un bordo / layout.

Anche i

vuoti

o non contengono contenuto, quindi non c’è nulla da rappresentare, risultando di nuovo in tale caso null .

Tuttavia, puoi ingannare il browser nel pensare che la cella abbia un contenuto, dando le proprietà di layout div/span vuote. Il modo più semplice è applicare lo zoom:1 stile CSS zoom:1 .

 
Foo

Questa soluzione alternativa è meglio dell’utilizzo di   , dal momento che non rovina inutilmente gli screen reader e non rappresenta in modo errato il valore della cella. Nel browser più recente è ansible utilizzare la empty-cell: alternative.


Nota: al posto del commento di Tomalak, dovrebbe essere chiaro che hasLayout non ha nulla a che fare con null , si trattava semplicemente di un confronto tra il modo in cui il browser interagisce e rende hasLayout in modo simile a come un database o linguaggio di programmazione interagisce con null. È uno strech, ma ho pensato che potrebbe essere più facile da capire per quei programmatori che hanno trasformato i web designer.

Idealmente, non dovresti avere celle vuote in una tabella. O hai una tabella di dati, e non ci sono dati in quella specifica cella (che dovresti indicare con “-“, o “n / a /”, o qualcosa di altrettanto appropriato, o – se devi – & nbsp ;, come suggerito ), oppure hai una cella che deve estendersi su una colonna o riga, oppure stai cercando di ottenere un layout con una tabella che dovresti usare per CSS.

Possiamo avere un po ‘più di dettagli?

Questa domanda è vecchia, ma è ancora un risultato eccellente in Google, quindi aggiungerò quello che ho trovato:

Semplicemente aggiungendo border-collapse: collapse allo stile tabella ha risolto questo problema per me in IE7 (e non ha influenzato il modo in cui sono visualizzati in FF, Chrome, ecc.).

Meglio evitare il codice estraneo di aggiungere un   o altri elementi di spaziatura quando puoi correggere con i CSS.

Immagino che questo non possa essere fatto con i CSS; Devi inserire un & nbsp; in ogni cella vuota per il bordo da mostrare in IE …

empty-cell ha risolto solo Firefox (sì, ho davvero avuto questo problema in Firefox) IE 7 e 8 erano ancora problematici ..

Questo ha funzionato per me sia in Firefox 3.6.x, IE 7 e 8, Chrome e Safari:

==============================

 table { *border-collapse: collapse;} .sampleTD { empty-cells: show;} 

==============================

Dovevo usare * per accertarmi che lo stile della tabella fosse applicato solo al browser IE.

Prova questo se non puoi usare uno spazio non divisibile:

 var tn = document.createTextNode('\ '); yourContainer.appendChild(ta); 

Creo uno stile div che ha lo stesso colore del carattere dello sfondo della cella e scrive qualsiasi cosa (di solito un “-” “n / a” o “vuoto”) per fornire il contenuto della cella. Si presenta se si evidenzia la pagina, ma se visualizzata normalmente appare come si desidera.

Uso un mix di html e css per creare griglie di tabelle cross browser:

html

css

 td{background-color:#fff;} 

Non ho ancora riscontrato problemi con nessun browser.

“IE” non è più un termine utile in questo contesto ora che IE8 è fuori.

IE7 fa sempre “empty-cells: show” (o così mi è stato detto … Vista). IE8 in qualsiasi delle sue modalità “Quirks” o “IE7 Standards” fa sempre “empty-cells: hide”. IE8 nella modalità “Standard” imposta automaticamente “celle vuote: mostra” e supporta l’attributo tramite CSS.

Per quanto ne so, ogni altro browser ha supportato correttamente questo per diversi anni (so che è stato aggiunto in Firefox 2).

Sto prendendo questo da un altro sito ma:

 .sampletable { border-collapse: collapse;} .sampleTD { empty-cells: show;} 

Utilizzare per il CSS rispettivamente per la tabella e l’elemento TD.