Wie kann ich einen Rahmen nur innerhalb einer Tabelle anwenden?

195

Ich versuche herauszufinden, wie man einen Rand nur innerhalb der Tabelle hinzufügt. Wenn ich es tue:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

Der Rand befindet sich um die gesamte Tabelle und auch zwischen Tabellenzellen. Was ich erreichen möchte, ist, nur innerhalb der Tabelle einen Rand um Tabellenzellen zu haben (ohne äußeren Rand um die Tabelle).

Hier ist das Markup, das ich für Tabellen verwende (obwohl ich denke, dass das nicht wichtig ist):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

Und hier sind einige grundlegende Stile, die ich auf die meisten meiner Tabellen anwende:

table {
    border-collapse: collapse;
    border-spacing: 0;
}
html css html-table border Richard Knop
quelle
Ich sehe nur Ränder nur um die Zellen. Da jede der Zellen einen Rand hat, scheint die Tabelle einen Rand zu haben. Vielleicht verstehe ich die Frage nicht?
Chetan S
3
Auch Binnengrenzen genannt .
Mechanische Schnecke

Antworten:

203

Wenn Sie das tun, was Sie meiner Meinung nach versuchen, brauchen Sie etwas Ähnliches:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

Das Problem ist, dass Sie einen "vollständigen Rand" um alle Zellen setzen, wodurch es so aussieht, als hätten Sie einen Rand um die gesamte Tabelle.

Prost.

BEARBEITEN: Ein wenig mehr Informationen zu diesen Pseudoklassen finden Sie im Quirksmode , und wie zu erwarten, sind Sie in Bezug auf die IE-Unterstützung ziemlich SOL.

theIV
quelle
Mit einfachen Tabellen wie diesen gibt es eine viel kürzere Lösung, bei der die Verwendung von Pseudoklassen durch Verwendung des nächsten Geschwisterkombinators vermieden wird. Siehe meine Antwort.
Dalgard
1
@theIV, da dies vor mehr als 5 Jahren beantwortet wurde, gibt es einen "neuen" / "effizienteren" Weg, dies zu tun?
jbutler483
Funktioniert nicht, wenn Sie jemals den Zeilenbereich in der ersten Spalte einer Tabelle verwenden.
Jack
191

das funktioniert bei mir:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

Beispiel anzeigen ...

In FF 3.6 und Chromium 5.0 getestet, bietet IE keine Unterstützung. von W3C :

Grenzen mit dem "Randstil" "versteckt" haben Vorrang vor allen anderen widersprüchlichen Grenzen. Jeder Rahmen mit diesem Wert unterdrückt alle Rahmen an dieser Stelle.

Anthonyrisinger
quelle
1
Solange Sie keinen Tabellenrand benötigen, ist dies definitiv die eleganteste Lösung.
cjroth
42

Beispiel für eine sehr einfache Möglichkeit, den gewünschten Effekt zu erzielen:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>
jony
quelle
13
"MAGIC" EXPLAINED: frame und rulessind ALTE (nicht HTML5) table Attribute (Sie sollten stattdessen CSS verwenden). framesagt, welche Teile der äußeren Tabellenränder sichtbar sein sollen - voidbedeutet, alle äußeren Ränder auszublenden ... rulessagt, welche Teile der inneren Tabellenränder sichtbar sein sollen - allbedeutet alle ... offensichtlich ... Bitte verwenden Sie dies nicht, es sei denn, Sie sind HTML3-Fanatiker ... :)
jave.web
1
Hinzufügen von so etwas wie Rand: 1px festes Schwarz stellt sicher, dass die äußere Grenze der Tabelle einen Rand erhält.
Aaron Liu
1
Hat 2020 wie ein Zauber gearbeitet, um einer lächerlich verteilten Tabelle auf einer Website, die ich gerade las, schnell Lesbarkeit zu verleihen. Eigentlich war genau das genug für die Binnengrenzen: rules = "all"
Edoardo Facchinelli
11

Aufgrund der Mantain-Kompatibilität mit ie7, ie8 empfehle ich, dazu das erste und nicht das letzte Kind zu verwenden:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Weitere Informationen zu CSS 2.1-Pseudoklassen finden Sie unter: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Crisboot
quelle
Dies ist eine großartige Lösung. Aber seien Sie vorsichtig, wenn Sie eine andere Tabelle in einer Ihrer Tabellenzellen haben und die inneren Ränder sehen möchten, benötigen Sie einen weiteren Satz CSS-Zeilen für Ihre "innere" Tabelle
Michael Biermann
10

Für gewöhnliches Tabellen-Markup ist hier eine kurze Lösung, die auf allen Geräten / Browsern in BrowserStack mit Ausnahme von IE 7 und darunter funktioniert:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Fügen Sie für die IE 7-Unterstützung Folgendes hinzu:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Ein Testfall ist hier zu sehen: http://codepen.io/dalgard/pen/wmcdE

Dalgard
quelle
Großartig - da dies auch ermöglicht, einen anderen Rand für die Tabelle festzulegen, als sie nur nicht anzuzeigen.
Jsbueno
5

das sollte funktionieren:

table {
 border:0;
}

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

bearbeiten:

Ich habe es gerade versucht, keine Tabellenkante. aber wenn ich einen Tabellenrand setze, wird er durch den Randkollaps beseitigt.

Dies ist die Testdatei:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>
Rufinus
quelle
Nein, das hat nicht funktioniert. Ich habe es versucht. Ich werde meinen ersten Beitrag bearbeiten.
Richard Knop
0

Fügen Sie den Rand zu jeder Zelle folgendermaßen hinzu:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Entfernen Sie den oberen Rand von allen Zellen in der ersten Zeile:

table > tbody > tr:first-child > td { border-top: 0; }

Entfernen Sie den linken Rand aus den Zellen in der ersten Spalte:

table > tbody > tr > td:first-child { border-left: 0; }

Entfernen Sie den rechten Rand aus den Zellen in der letzten Spalte:

table > tbody > tr > td:last-child { border-right: 0; }

Entfernen Sie den unteren Rand aus den Zellen in der letzten Zeile:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

Brian
quelle
0

Funktioniert für jede Kombination von tbody / thead / tfoot und td / th

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}
<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>
Erweitern Sie das Snippet

user1119279
quelle