CSS: Nur Ränder zwischen Tabellenspalten

Gibt es eine Möglichkeit, mithilfe von CSS Ränder in einer Tabelle nur zwischen Spalten anzuzeigen (nicht an den Außenkanten)?

Bearbeiten 2

Erasmus hat unten einen besseren Einzeiler

Nicht ohne knifflige CSS-Selektoren und zusätzliches Markup und dergleichen.

So etwas könnte funktionieren (mit CSS-Selektoren):

table {
    border:none;
    border-collapse: collapse;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table td:first-child {
    border-left: none;
}

table td:last-child {
    border-right: none;
}

Bearbeiten

Um den Kommentar von @ jeroen zu verdeutlichen, brauchen Sie nur Folgendes:

table { border: none; border-collapse: collapse; }
table td { border-left: 1px solid #000; }
table td:first-child { border-left: none; }

Ich weiß, dass dies eine alte Frage ist, aber es gibt eine einfache, einzeilige Lösung, die konsistent für Chrome, Firefox usw. sowie für IE8 und höher funktioniert (und größtenteils auch für IE7 - siehe http: //www.quirksmode.org/css/selectors/ für Details):

table td + td { border-left:2px solid red; }

Die Ausgabe ist ungefähr so:

Col1 | Col2 | Col3

Damit funktioniert dies, dass Sie einen Rahmen nur für Tabellenzellen definieren, die an eine andere Tabellenzelle angrenzen. Mit anderen Worten, Sie wenden das CSS auf alle Zellen in einer Reihe mit Ausnahme der ersten an.

Durch Anwenden eines linken Randes auf das zweite bis letzte Kind wird die Linie "zwischen" den Zellen angezeigt.

Ränder auf Tischen sind immer etwas schuppig. Eine Möglichkeit wäre, jeder Tabellenzelle eine Rand-Rechts-Deklaration hinzuzufügen, mit Ausnahme derjenigen in der Spalte ganz rechts. Wenn Sie einen Tabellenabstand verwenden, funktioniert dies nicht sehr gut.

Eine andere Möglichkeit wäre, ein 1px hohes Hintergrundbild mit den darin enthaltenen Rändern zu verwenden. Dies funktioniert jedoch nur, wenn Sie die Breite jeder Zelle jederzeit garantieren können.

Eine andere Möglichkeit besteht darin, mit colgroup / col zu experimentieren. Dies hatte ziemlich schreckliche Unterstützung Cross-Browser beim letzten Mal, als ich es mir ansah, hätte sich aber seitdem verbessern können: http://www.webmasterworld.com/forum83/6826.htm

Ich vereinfache das Problem möglicherweise, aber funktioniert td {border-right: 1px solid red;} für Ihre Tabelleneinrichtung?

Sie müssen ein border-rightauf den tds setzen und dann die letzten tds in einer Reihe anvisieren, auf die der Rand gesetzt werden soll none. Wege zum Ziel:

1. Setzen Sie eine Klasse in den letzten tdjeder Zeile und verwenden Sie diese
2. Wenn es sich um eine festgelegte Anzahl von Zellen handelt und nur auf neuere Brower abzielt, können 3 Zellen breit verwendet werden td + td + td
3. Oder besser (mit neuen Browsern) td:last-child

Ich habe dies in einem Stylesheet für drei Spalten verwendet, die durch vertikale Ränder getrennt sind, und es hat gut funktioniert:

#column-left {
     border-left: 1px solid #dddddd;
}
#column-center {
     /*no border needed/*
}
#column-right {
     border-right: 1px solid #dddddd;
}

Die linke Spalte erhält rechts einen Rand, die rechte Spalte einen linken Rand und die mittlere Spalte wird bereits von links und rechts gepflegt.

Wenn sich Ihre Spalten in einem div / wrapper / table / etc befinden ... vergessen Sie nicht, zusätzlichen Platz hinzuzufügen, um die Breite der Ränder anzupassen.

Im Inneren <td>verwendenstyle="border-left:1px solid #colour;"

Siehe das rulesAttribut der Tabelle - https://www.w3.org/TR/html401/struct/tables.html#h-11.3.1

Es gibt keine einfache Möglichkeit, dies zu tun, außer etwas wie class = "lastCell" auf dem letzten td in jedem tr zu tun und dann Ihr CSS so einzurichten:

#table td {
    border-right: 5px solid red
}

.lastCell {
    border-right: none;
}

Nehmen Sie eine Tabelle mit dem Klassennamen column-bordered-tableund fügen Sie diese unter css hinzu. Dies funktioniert auch mit der bootstrapTabelle

.column-bordered-table thead td {
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
}

.column-bordered-table td {
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
}

.column-bordered-table tfoot tr {
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
}

siehe die Ausgabe unten
N: B Sie müssen die Backgorund-Farbe des Tabellenkopfs gemäß Ihren Anforderungen hinzufügen