wake-up-neo.com

Mit CSS können Sie die äußere Farbe der Tabelle von der Randfarbe der Zellen unterscheiden

Ich möchte CSS verwenden, um eine Farbe für den äußeren Rand der Tabelle festzulegen ....__ Dann hätten die inneren Zellen eine andere Randfarbe ...

Ich habe so etwas erstellt:

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

table td {
     border: 1px solid red;
}

Problem ist, die Farbe der Tabelle ändert sich und wird rot, wie Sie hier sehen können: http://jsfiddle.net/JaF5h/

Wenn die Randbreite der Tabelle auf 2 Pixel erhöht wird, funktioniert sie: http://jsfiddle.net/rYCrp/

Ich habe mich schon so lange mit CSS- und Cross-Browser-Problemen beschäftigt ... Dies ist das erste Mal, dass ich so etwas sehe und bin total festgefahren ... Keine Ahnung, was ich tun soll!

Jeder weiß, wie man das mit der Randbreite repariert: 1px?

17
Ahmad Alfy

Ich würde dies erreichen, indem Sie benachbarte Selektoren wie folgt verwenden:

table {
    border: 1px solid #000;
}

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

tr + tr {
    border-top: 1px solid red;
}

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

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

Es ist ein wenig repetitiv, aber es erzielt den Effekt, nach dem Sie suchen, indem Sie den oberen und den linken Rand der ersten Zeile bzw. Spalte festlegen und dann die internen Zeilen und Zellen mit Rot überschreiben.

Dies funktioniert natürlich nicht im IE6, da die benachbarten Selektoren nicht verstanden werden.

http://jsfiddle.net/JaF5h/36/

13
ajcw

Versuche dies:

tbody { display:block; margin: -1px; }
7
Atari

Die vorherigen Antworten haben das für mich nicht vollständig gelöst. Die akzeptierte Antwort ermöglicht, dass die Innengrenzen den äußeren Tabellenrand überlappen. Nach einigen Versuchen kam ich zu folgender Lösung.

Durch das Festlegen des Tabelleneinblendungsstils zum Trennen der inneren Ränder überlappen Sie nicht die äußeren. Von dort werden die zusätzlichen und doppelten Grenzen beseitigt.

HTML:

<table>
<tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>

CSS

table {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 0;
}
table td, table th {
    border: 1px solid red;
}

table tr td {
    border-right: 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{
    border-top: 0;
}

https://jsfiddle.net/o5ar81xg/

5
Mike

Erstellen Sie ein Div, das Ihren Tisch umgibt. Legen Sie die div-Rahmenfarbe für die Außenseite Ihrer Tabelle fest. NICHT den Tisch zusammenfassen. Lassen Sie stattdessen Ihre Zellen getrennt werden, um die Hintergrundfarbe (Innenumrandungen) des Divs darunter anzuzeigen. Stellen Sie dann die Hintergrundzellen auf die Hintergrundfarbe Ihrer Wahl ein.

HTML:

<div id="tableDiv">
    <table id="studentInformationTable">
        <!-- Add your rows, headers, and cells here -->
    </table>
</div>

CSS:

#tableDiv {
    margin-left: 40px;
    margin-right: 40px;
    border: 2px solid brown;
    background-color: white;
}

table {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-color: brown;
}

td, th {
    background-color: #e7e1d3;
    padding: 10px 25px 10px 25px;
    margin: 0px;
}
1
Rick Penabella

Versuchen Sie Folgendes: Es hat für mich funktioniert:

table {
    border-collapse: collapse;
    border: solid #000; 
}

table td {
    border: 1px solid red;
}
0
Ritesh