it-swarm.com.de

CSS - Rand nur innerhalb der Tabelle

Ich versuche herauszufinden, wie man Rahmen nur innerhalb der Tabelle hinzufügt. Wenn ich mache:

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

Der Rand ist um die gesamte Tabelle und auch zwischen Tabellenzellen. Was ich erreichen möchte, ist, dass der Rahmen nur innerhalb der Tabelle um die Tabellenzellen verläuft (ohne äußeren Rahmen 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 für die meisten meiner Tabellen verwende:

table {
    border-collapse: collapse;
    border-spacing: 0;
}
186
Richard Knop

Wenn Sie das tun, was Sie meines Erachtens tun wollen, 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 besteht darin, dass Sie einen vollständigen Rahmen um alle Zellen setzen, sodass es so aussieht, als hätten Sie einen Rahmen um die gesamte Tabelle.

Prost.

EDIT: Ein wenig mehr Informationen zu diesen Pseudoklassen finden Sie unter quirksmode , und wie zu erwarten, sind Sie so ziemlich S.O.L. in Bezug auf IE Unterstützung.

194
theIV

das funktioniert bei mir:

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

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

Beispiel anzeigen ...

getestet in FF 3.6 und Chrom 5.0, IE fehlt Unterstützung; von W3C :

Grenzen mit dem 'border-style' von 'hidden' haben Vorrang vor allen anderen sich widersprechenden Grenzen. Ein Rand mit diesem Wert unterdrückt alle Ränder an dieser Stelle.

184
anthonyrisinger

Beispiel für einen sehr einfachen Weg, um 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>
40
jony

Aufgrund der Mantain-Kompatibilität mit ie7, ie8 empfehle ich dazu first-child und nicht last-child 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;}

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

11
Crisboot

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

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

10
dalgard

das sollte funktionieren:

table {
 border:0;
}

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

bearbeiten:

ich habe es einfach versucht, keine Tischkante. aber wenn ich einen tabellenrand setze, wird dieser durch den border-collapse eliminiert.

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>
5
Rufinus

das geht alles ohne CSS <TABLE BORDER=1 RULES=ALL FRAME=VOID>

code von: HTML CODE TUTORIAL

3
TwoFaceZ

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>
0
user1119279

Fügen Sie den Rahmen zu jeder Zelle wie folgt 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 von den Zellen in der ersten Spalte:

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

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

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

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

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

http://jsfiddle.net/hzru0ytx/

0
Brian