Warum Firefox fehlt der Rand auf einige HTML-Tabellen

Question

Ich benutze Firefox 3.5.7 und ich habe das gleiche CSS in mehreren HTML-Tabellen verwendet, aber es gibt einige Beispiele, wo Teile der Grenzen nicht angezeigt werden.

Was macht für mich keinen Sinn, dass das gleiche CSS auf der gleichen Seite für eine andere HTML-Tabelle funktioniert. Außerdem sieht die gleiche Seite in Internet Explorer von einem Grenzpunkt aus gut aus.

Hier ist ein Bild mit einem Beispiel, wie Sie sehen können, in diesem Fall fehlt der Unterseite der ersten Tabelle ein Rand.

Hat jemand eine Ahnung, warum dies hier geschehen?

Answer 1

Vielleicht haben Sie ein bisschen gezoomt. Dies kann entweder versehentlich oder wissentlich geschehen, wenn Sie Ctrl + Scrollwheel tun. Vielleicht ist es nicht komplett auf Zoomstufe Null zurückgesetzt. Dieses Miss-Rendering-Verhalten ist dann auf einigen Websites, auch hier bei SO, erkennbar.

Um dies zu beheben, drücken Sie einfach Ctrl + oder tun Ansicht>Zoom> Setzen Sie den Zoomstufe zurücksetzen auf Standard.

Dies ist Firefox/Gecko Bug 410959. Dies betrifft Tabellen mit border-collapse:collapse. Es ist aus dem Jahr 2008, und es gibt keinen wirklichen Fortschritt, so dass Sie wahrscheinlich einen Workaround finden müssen. Eine Möglichkeit besteht darin, border-collapse:separate zu verwenden und mit Grenzen pro Zelle zu fummeln.

Answer 2

Dies wurde durch die Tabelle (mit einem fehlenden unteren Rand) in einem Div verursacht ... Die Grenze wurde anscheinend nicht in der Tischhöhe berechnet, so dass die Grenze dort war, wurde aber nicht angezeigt.

Den umliegenden div einen margin-bottom von 1px geben das Problem gelöst.

Answer 3

Ich habe ein ähnliches Problem gefunden, wenn ich in Firefox auf einer Anwendung, an der ich arbeite, herausgezoomt habe.

Die Hauptursache war, dass die Eigenschaft CSS border-collapse auf collapse gesetzt war.

Wechsel zu separate stattdessen das Problem behoben. Das bedeutete jedoch, dass ich die Art und Weise, wie Rahmen an verschiedenen Teilen der Tabelle angewendet werden, überdenken musste, da sonst Ihre Grenzen doppelt so dick erscheinen. Ich musste am Ende jQuery verwenden, um eine spezielle "letzte" Klasse zu den letzten td oder th in jedem tr, und zum letzten tr in der Tabelle zu geben. Meine Frage war so etwas wie:

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

Meine CSS-Regeln waren ähnlich, dass:

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

Ich habe mit Browser am Ende Targeting, so dass ich nur diese Regeln zu Firefox Benutzer angewendet, aber es arbeiten kann Alle Browser habe ich nicht getestet.

Answer 4

Verwenden Sie einfach border-spacing:0; hoffe, dass dies Ihr Problem lösen wird.

Answer 5

Der Rahmen wurde nicht mehr angezeigt, wenn der Browser-Zoom erhöht wurde. Ich konnte es lösen, indem ich Folgendes tue. Getestet in Chrome und Firefox.

padding: 0.5px !important 

Answer 6

Ich hatte das gleiche Problem mit fehlenden Tabellenrahmen. Meine Lösung ist:

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

Und Grenze für Tabellenzeilen:

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

ich Bootstrap entweder in meinem Layout verwende und die Tabelle hat auch Bootstrap-CSS-Klassen wie „Tabelle table-gestreifte Tabellen- grenzte“

Diese Lösung funktioniert für mich, wenn ich Lösung versucht, mit

border-collapse: separate !important; 

es hat nicht richtig für mich funktioniert.

Answer 7

Aufbauend auf der guten Antwort von @GregL (ich nicht in der Lage scheinen „Kommentar“ direkt auf sie): Statt JQuery der Verwendung einer „letzten“ Klasse zu generieren, habe ich einfach die eingebaute in pseudo-Elementselektoreinrichtung :first-child . Ich baute Regeln tr:first-child und td:first-child, die border-top und border-left definieren (anstelle von border-right und border-bottom wie in GregL Antwort). Die generischen Regeln definieren border-right und border-bottom anstelle von border-left und border-top. :first-child ist said to be supported in Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1 und Opera v. 9.6(). Getestet auf Firefox v. 40.0.3, wo ich dieses Problem in erster Linie gesehen habe.

Answer 8

arbeitete für mich Realisierung Antwort @Donald Payne

* (.table - Bootstrap-Klasse)

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