Problem beim Anwenden eines gepunkteten Rahmens auf Zellen im Tabellendesign

Das Problem, das Sie sehen, ist auf die Regeln der Konfliktlösung zurückzuführen, wenn es um den Grenzeinbruch geht. Solid hat Vorrang vor dem Punkt:

Ссылка

Ich glaube, dass Sie die widersprüchlichen Grenzen ebenfalls streichen müssen. Wenn Sie also den linken Rand einer Zelle als punktiert markieren, müssen Sie den rechten Rand der Zelle links davon ebenfalls gestrichelt setzen (oder etwas mit niedrigerer Priorität, aber punktiert am sinnvollsten).

Ok, diese Antwort ist teilweise aus den Informationen in den vorherigen Antworten abgeleitet, aber das Hinzufügen von !important , oder das Platzieren von linken und rechten Grenzen benachbarter Zellen ist nicht genug.

Erstens ist der Rendering-Mechanismus zwischen verschiedenen Browsern nicht derselbe. Diese Geige zeigt zwei Zeilen über die Gesamthöhe von 4 Zeilen in IE, FF und Opera. Aber Chrome und SafariWin verkürzen die linke Zeile auf nur eine Zeile.

Um das auszugleichen, habe ich eine zusätzliche Dummy-Spalte hinzugefügt, die sich auch als sehr nützlich erwiesen hat, um die meisten Klassen im HTML zu eliminieren.

Zweitens gibt der Basis-css-Stil den Zellen nur noch einen linken und einen unteren Rand. Daher haben die letzten Zellen einen lastCol Stil erhalten, weil IE7 dem tr -Tag keine Rahmen hinzufügt.

Hier ist die überarbeitete Geige , getestet mit IE7, IE8, IE9, FF, Opera, SafariWin und Chrome.

Bearbeiten:

Wenn Sie nicht wollen, dass die Dummy-Spalte, ich es geschafft so weit , aber diese Lösung funktioniert nicht in Chrome oder SafariWin. (Etwas Seltsames geht vor sich. Vielleicht kann jemand anderes das erklären.)

Hier ist meine Geige:

Ссылка

Ich habe nur

am unteren Ende des Stylesheets, und fügen Sie die dottedBottomBorder -Klasse die vier Zellen auf der rechten Seite jeder Pick-Spalte hinzu.

Das Problem, das Sie haben, ist, dass der feste Rand der unteren Zelle den gepunkteten Rand der oberen Zelle überlappt. Das lindert das.

Das funktioniert, wenn ich Inline-Styles zum HTML hinzufüge und die Klassennamen loslasse.

Ссылка

BEARBEITEN

Dies funktioniert auch, wenn ich die CSS-Stile mit einer !important -Deklaration

Ссылка

Hinweis

Die Fiddles zeigen die gepunktete Linie als red , nur um auf die Änderung hinzuweisen. Siehe obigen Code für die korrekte Verwendung.

Siehe auch den folgenden Kommentar zur Verwendung von !important ( Was bedeutet die Verwendung von"! wichtig "in CSS? )

Mit jQuery können Sie:

• finde alle Elemente in der Spalte Möchtegern-Geen-Grenzen
• gebe ihnen alle gepunktete grüne lef
• gebe ihnen alle eine gepunktete untere grüne Grenze
  • benutze das: last um den unerwünschten unteren Rand vom letzten Element zu entfernen

Sie können alle Zeilen in dieser Spalte finden, indem Sie Folgendes tun:

Beachte, dass ich sowas sage, weil ich mit jQuery nicht sehr gut bin und nicht die richtige Syntax / Verständnis dafür habe, wie Selektoren verwendet werden. Aber ich habe Beispiele gesehen, wo ähnliche Dinge gemacht werden. Sie können Tonnen von Beispielen dieser Seite finden, oder konsultieren Sie die Originaldokumentation (die irgendwie schlecht ist, imho).

Ok, ich habe es geschafft:

Das ist dein Problem. Ich würde denken, dass Sie den Tabellenzellen separate Klassen zuweisen sollten anstatt allgemeinen Zuweisungen a la tr & gt; td Vielleicht gibt es einen Weg mit weniger Stress, aber nicht sicher. Aber im Grunde hat diese Zeile Vorrang vor dem punktierten Stil.

Hier gehen wir Ссылка