Mein tr Grenze überschreiben Sie die Tabelle Grenze

Habe ich den folgenden CSS-Code für meine Tabelle :

table{
  border: 1px solid black;
  border-collapse: collapse;
}

tr{
    border-bottom: 1px solid #a2a2a2;
  }

Ich möchte, dass meine Tabelle haben einen schwarzen Rand und im inneren, die Linie werden soll, getrennt durch einen grauen Rahmen. Jedoch am unteren Rand der Tabelle wird überschrieben durch die tr und ist Grau statt schwarz.

Wie kann ich verwalten, geben Sie die Priorität auf die Tabelle Grenze gegen die tr Grenze?

InformationsquelleAutor Syl | 2013-06-13
  1. 7

    Bewegen Sie Ihren unteren Rand an der Oberseite für die tr, und setzen Sie den ersten tr keine Grenze:

    table{
  border: 1px solid black;
  border-collapse: collapse;
}

tr{
    border-top: 1px solid #a2a2a2;
}

tr:first-child{
    border:none;
}

    jsFiddle, um zu demonstrieren, dass es funktioniert (mit leicht modifizierten Grenze Farben und Größen zu helfen, Ihnen zu zeigen, sich besser in der demo)

    Beachten Sie, dass diese Lösung beinhaltet etwas mehr CSS-code als andere gültige Lösungen, hat aber den Vorteil der besseren browser-Kompatibilität. (:first-child ist CSS2, während :last-child ist CSS3)

    [BEARBEITEN]

    Als pro OP ' s Kommentar unten: um Zu verhindern, dass die Zelle Grenzen Blutungen in der Tabelle Grenze, wir müssen Folgendes tun:

    • Entfernen Sie die border-collapse:collapse. Dies ist, was macht die Grenzen kombiniert werden, wodurch die Blutungen Wirkung.

    • Setzen Sie die inneren Grenzen der Zellen (td) anstatt der Zeilen (tr). Dies ist notwendig, da ohne border-collapse ist, können wir nicht über die Grenzen der tr.

    • Hinzufügen border-spacing:0 auf den Tisch. Dies schließt die Lücken zwischen den td Elemente, die zeigen, bis jetzt da die Grenze ist auf Sie eher, als das tr.

    Hier ist der fertige code:

    table{
  border: 4px solid blue;
  border-spacing:0;
}

td{
    border-top: 4px solid red;
}

tr:first-child>td{
    border:none;
}

    Und hier ist eine aktualisierte version des fiddle: http://jsfiddle.net/T5TGN/2/

    • ich denke, es gibt keine Möglichkeit zu verhindern, dass die rote an der Spitze der blau (in deinem jsFiddle).
    • ja es ist; ich werde aktualisieren, die Antwort...
    • Wow, du kennst deine CSS. Danke! Verrückt, wie etwas, das einfach aussieht, braucht eine Tonne von tricks.
    • Referenz : Wenn Sie eine reset.css oder etwas gleichwertiges werden Sie sicher, dass Ihre Tabelle nicht heritate eine border-collapse:collapse ich zu tun hatte border-collapse:separate; machen, damit es funktioniert.
    • Verrückt, wie etwas, das einfach aussieht, braucht eine Tonne von tricks. ja, so wahr! Ein weiteres Beispiel für css-Versagen in der Praxis. Warum, oh warum haben die Zellrahmen 'gewinnen' gegen die Tabellenrahmen hier? Wer würde das wollen?
    InformationsquelleAutor Spudley
  2. 4

    verwenden :not(:last-child)

    table{
 border: 1px solid black;
 border-collapse: collapse;
}

tr:not(:last-child){
 border-bottom: 1px solid #a2a2a2;
}

    Sehen Sie sich bitte die: http://jsfiddle.net/JSWorld/QmuA9/1/

    • +1 korrigieren. Jedoch beachten Sie, dass dies nicht funktioniert in älteren Browsern (sowohl :not und :last-child werden nicht unterstützt in IE8, und :not fehlt, die von alten Browsern)
    InformationsquelleAutor Sabarish Sankar
  3. 1

    Aktualisieren Sie die Tabelle mit css wie folgt

    table, tr:last-child
{
  border: 1px solid black;
  border-collapse: collapse;
}

    Können Sie die Demo

    InformationsquelleAutor spring
  4. 0

    versuchen Sie, hinzufügen von padding-bottom tr:

    tr{
    border-bottom: 1px solid #a2a2a2;
    padding-bottom: 1px;
  }
    InformationsquelleAutor DaftDev
Schreibe einen Kommentar