Problem beim Anwenden eines gepunkteten Rahmens auf Zellen im Tabellendesign

8

Hier ist meine Geige:

Zypern

In diesem Screenshot stellen die grünen Linien dar, wo ich gepunktete Linien anwenden möchte.

Ich bin in der Lage, die Links-rechts-Rahmen als gepunktete Linien erscheinen zu lassen, nicht aber die unteren Rahmen.

Wie kann ich das beheben?

    
keruilin 13.06.2011, 02:58
quelle

9 Antworten

6

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).

    
James Montagne 13.06.2011, 03:29
quelle
6

Hier ist eine Lösung:

  1. Wenn Sie nicht die vier Rahmen für jede Zelle angeben, sondern nur die linken und unteren Rahmen, werden Grenzkonflikte vermieden:

    %Vor%
  2. 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.

    
Luc125 16.06.2011 15:51
quelle
1

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.)

    
NGLN 15.06.2011 18:42
quelle
1

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.

    
Steve Robbins 20.06.2011 19:23
quelle
0

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

hinzufüge %Vor%

Ссылка

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? )

    
Jason Gennaro 15.06.2011 04:56
quelle
0

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:

%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%     
quelle
0
%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.

    
AR. 15.06.2011 04:34
quelle
0

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 ...

    
iHaveacomputer 15.06.2011 04:35
quelle
-1

Hier gehen wir Ссылка

    
RRStoyanov 15.06.2011 04:38
quelle

Tags und Links