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).
Hier ist eine Lösung:
Wenn Sie nicht die vier Rahmen für jede Zelle angeben, sondern nur die linken und unteren Rahmen, werden Grenzkonflikte vermieden:
%Vor% Um die gepunkteten Grenzen in der vierten Spalte zu setzen, müssen Sie nur Ihre dottedLeftBorder
und dottedBottomBorder
-Klassen auf ihre Zellen anwenden (aber nur die dottedLeftBorder
-Klasse für die letzte Zelle).
Hier ist nun die entsprechende Geige: Ссылка , wo jede Zelle in der vierten Spalte jetzt links und unten punktiert 1px schwarz ist Grenzen, mit Ausnahme der letzten, die keinen gepunkteten unteren Rand hat.
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
hinzugefügt %Vor% 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:
Sie können alle Zeilen in dieser Spalte finden, indem Sie Folgendes tun:
%Vor%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:
%Vor%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.
sieht so aus, als würde es Ihre gepunkteten Grenzen in td überschreiben oder ignorieren. weil Sie die Ränder hier fest einstellen:
%Vor%edit: Jemand hat meine ~ 20 Sekunden hier geschlagen ...
Tags und Links html css border css-tables