webentwicklung-frage-antwort-db.com.de

Warum fehlt Firefox bei einigen HTML-Tabellen der Rahmen?

Ich verwende Firefox 3.5.7 und habe dasselbe CSS, das in mehreren HTML-Tabellen verwendet wird, aber es gibt einige Beispiele, in denen Teile der Rahmen nicht angezeigt werden.

Was für mich keinen Sinn macht, ist, dass dasselbe CSS auf derselben Seite für eine andere HTML-Tabelle gut funktioniert. Dieselbe Seite in Internet Explorer sieht auch vom Rand her gut aus.

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

 enter image description here

Hat jemand eine Ahnung, warum dies hier passieren würde?

22
leora

Vielleicht haben Sie ein bisschen gezoomt. Dies kann entweder versehentlich oder wissentlich geschehen, wenn Sie dies tunCtrl+ Scrollrad. Möglicherweise ist es nicht vollständig auf Zoomstufe Null zurückgesetzt. This error behaviour is then some websites, also here at so, erkennbar.

Um dies zu beheben, drücken Sie einfachCtrl+ Oder Ansicht > Zoom > Zurücksetzen , um die Zoomstufe auf die Standardeinstellung zurückzusetzen.

Dies ist der Firefox/Gecko-Fehler 410959 . Dies betrifft Tabellen mit border-collapse:collapse. Es ist aus dem Jahr 2008 und es gibt keine wirklichen Fortschritte, daher müssen Sie wahrscheinlich eine Problemumgehung finden. Eine Möglichkeit besteht darin, border-collapse:separate zu verwenden und zellenweise mit Rändern zu fummeln.

61
BalusC

Beim Verkleinern einer Anwendung, an der ich arbeite, in Firefox ist ein ähnliches Problem aufgetreten.

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

Das Problem wurde stattdessen behoben, indem es in separate geändert wurde. Das bedeutete jedoch, dass ich die Art und Weise überdenken musste, in der Rahmen auf verschiedene Teile der Tabelle angewendet werden, da sich sonst die Dicke Ihrer Rahmen verdoppelt. Schließlich musste ich jQuery verwenden, um dem letzten td oder th in jedem tr und dem letzten tr in der Tabelle eine spezielle "letzte" Klasse zuzuweisen. Meine Anfrage war ungefähr so:

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

Meine CSS-Regeln waren ähnlich wie:

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 letztendlich das Browser-Targeting verwendet, sodass ich diese Regeln nur auf Firefox-Benutzer angewendet habe, aber es funktioniert möglicherweise für alle Browser, die ich nicht getestet habe.

11
GregL

Aufbauend auf der guten Antwort von @GregL (ich kann es scheinbar nicht direkt "kommentieren"): Anstatt mit JQuery eine "letzte" Klasse zu generieren, habe ich einfach den eingebauten Pseudoelement-Selektor :first-child verwendet. Ich habe Regeln für die Auswahl von tr:first-child und td:first-child erstellt, die border-top und border-left definieren (anstelle von border-right und border-bottom wie in GregLs Antwort). Die allgemeinen Regeln definieren border-right und border-bottom anstelle von border-left und border-top. :first-child wird angeblich unterstützt in Chrome 4.0, Firefox 3.0,IE7.0, Safari 3.1 und Opera 9.6 (). Getestet auf Firefox v. 40.0.3, wo ich dieses Problem überhaupt gesehen habe.

2
Donald Payne

Dies wurde dadurch verursacht, dass sich die Tabelle (mit einem fehlenden unteren Rand) innerhalb eines div befand ... Der Rand wurde anscheinend nicht in der Tabellenhöhe berechnet, sodass der Rand dort war, aber nicht angezeigt wurde.

Das Problem wurde behoben, indem der umgebenden Div ein Rand-Bottom von 1px zugewiesen wurde.

1
Tom

Ich hatte das gleiche Problem mit fehlendem Tabellenrand. Meine Lösung lautet:

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

Und Rahmen für Tabellenzeilen:

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

Ich verwende Bootstrap entweder in meinem Layout und die Tabelle hat auch Bootstrap-CSS-Klassen wie "table table-striped table-bordered"

Diese Lösung funktioniert bei mir, als ich die Lösung mit ausprobiert habe

border-collapse: separate !important;

es hat bei mir nicht richtig funktioniert.

1
vanrado

bei mir hat die Realisierung der Antwort @Donald Payne geklappt

* (.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;
}

Verwenden Sie einfach border-spacing:0; und hoffen Sie, dass dies Ihr Problem löst.

0
Varun Arora

Der Rand wurde nicht mehr angezeigt, als der Zoom des Browsers erhöht wurde. Ich konnte es folgendermaßen lösen. Getestet in Chrome und Firefox.

padding: 0.5px !important
0
Jerome Anthony