Perché Firefox manca il bordo su alcune tabelle HTML

Question

Sto utilizzando Firefox 3.5.7 e ho lo stesso CSS utilizzato in più tabelle HTML, ma ci sono alcuni esempi in cui parti di bordi non sono mostrate.

Ciò che non ha senso per me è che lo stesso CSS sulla stessa pagina per un'altra tabella HTML funziona correttamente. Inoltre, la stessa pagina in Internet Explorer sembra soddisfacente dal punto di vista del confine.

Ecco un'immagine con un esempio, come potete vedere in questo caso nella parte inferiore della prima tabella manca un bordo.

Qualcuno ha un indizio perché questo sarebbe accaduto qui?

Answer 1

Forse hai ingrandito/ridotto un po '. Ciò può accadere accidentalmente o consapevolmente quando lo si fa Ctrl + Scrollwheel. Forse non è completamente resettato per zoomare a livello zero. Questo comportamento errato è quindi riconoscibile in alcuni siti Web, anche qui in SO.

Per risolvere questo problema, basta premere Ctrl + o fare Visualizza>Zoom> Ripristina per ripristinare il livello di zoom di default.

Questo è un bug di Firefox/Gecko 410959. Ciò riguarda le tabelle con border-collapse:collapse. È del 2008 e non ci sono progressi reali, quindi probabilmente avrai bisogno di trovare una soluzione alternativa. Un modo è utilizzare border-collapse:separate e giocherellare con i bordi su una base per cella.

Answer 2

Questo è stato causato dalla tabella (con un bordo inferiore mancante) da essere all'interno di un div ... Il bordo apparentemente non è stato calcolato nell'altezza della tabella, quindi il bordo era lì ma non è stato mostrato.

Dare al div esterno un margine inferiore da 1 px ha risolto il problema.

Answer 3

Ho riscontrato un problema simile durante lo zoom in Firefox su un'applicazione a cui sto lavorando.

La causa principale era la proprietà border-collapse del CSS impostata su collapse.

Cambiare in separate invece risolto il problema. Tuttavia, ciò significava che dovevo riconsiderare il modo in cui i bordi sono applicati a varie parti del tavolo, perché altrimenti i bordi sembrerebbero raddoppiati di spessore. Ho finito per utilizzare jQuery per assegnare una speciale "ultima" classe all'ultimo td o th in ogni tr e all'ultimo tr nella tabella. La mia domanda era qualcosa di simile:

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last'); 

mie regole CSS erano simili che:

table 
{ 
    border-collapse: separate !important; 
} 

table tr, table th, table td 
{ 
    border-right-width: 0; 
    border-bottom-width: 0; 
    border-left: 1px solid black; 
    border-top: 1px solid black; 
} 

table td.last, table th.last 
{ 
    border-right: 1px solid black; 
} 

table tr.last td 
{ 
    border-bottom: 1px solid black; 
} 

table 
{ 
    border: 0; 
} 

ho fatto finire utilizzando il browser mira in modo che ho applicato solo queste regole per gli utenti di Firefox, ma può funzionare per tutti i browser, non ho provato

Answer 4

Basta usare border-spacing:0; sperare che questo risolva il tuo problema.

Answer 5

Il bordo ha iniziato a scomparire quando è stato aumentato lo zoom del browser. Sono stato in grado di risolverlo facendo quanto segue. Testato su Chrome e Firefox.

padding: 0.5px !important 

Answer 6

Ho avuto lo stesso problema con il bordo tabella mancante. La mia soluzione è:

table{ 
    border-collapse: collapse !important; 
    border-spacing: 0px; 
    border: 1px solid #DDD; 
} 

e di frontiera per le righe della tabella:

table tr{ 
    border-bottom: 1px solid #DDD !important; 
} 

Sto usando Bootstrap sia nel mio layout e il tavolo ha anche classi CSS bootstrap come "tavolo da ping-strisce tavolo- confina"

Questa soluzione funziona per me, quando ho provato la soluzione con

border-collapse: separate !important; 

non ha funzionato correttamente per me.

Answer 7

Costruire sulla buona risposta di @GregL (mi sembra in grado di "commento" direttamente su di esso): Invece di utilizzare JQuery per generare un "ultimo" di classe, ho semplicemente usato il built-in del selettore pseudo-elemento :first-child . Ho creato regole selezionando tr:first-child e td:first-child che definiscono border-top e border-left (anziché border-right e border-bottom come nella risposta di GregL). Le regole generiche definiscono border-right e border-bottom anziché border-left e border-top. :first-child è said to be supported in Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1 e Opera v. 9.6(). Testato su Firefox v. 40.0.3, dove ho visto questo problema in primo luogo.

Answer 8

ha lavorato per me realizzazione di risposta @Donald Payne

* (.table - bootstrap classe)

table.table { 
    border-collapse: separate !important; 
} 

table.table tr, 
table.table th, 
table.table td { 
    border-right-width: 0 !important; 
    border-bottom-width: 0 !important; 
    border-left: 1px solid #DDD !important; 
    border-top: 1px solid #DDD !important; 
} 

table.table td:last-child, 
table.table th:last-child { 
    border-right: 1px solid #DDD !important; 
} 

table.table tr:last-child td { 
    border-bottom: 1px solid #DDD !important; 
} 

table.table { 
    border: 0 !important; 
} 

table.table thead tr:last-child th, 
table.table thead tr:last-child td { 
    border-bottom: 1px solid #DDD !important; 
} 

table.table tbody tr:first-child th, 
table.table tbody tr:first-child td { 
    border-top-width: 0 !important; 
}