Tabellenformatierung - Border der TH
Sympatisant
- css
Hallo allerseits,
folgendes: Ich habe eine Tabelle mit einer bestimmten Rahmenfarbe.
Die THs sollen untereinander (rechts und links) durch einen andersfarbigen
Rahmen getrennt werden.
Mein Ansatz ist wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.datatable {
border-style:solid;
border-color:#D6D7D6;
border-width:1px;
border-spacing:0px;
padding:0px;
}
.datatable td {
padding:2px;
}
.datatable th {
text-align:left;
background-color:#FFBA10;
padding:2px;
border-style:solid;
border-collapse:collapse;
border-width:0px 1px;
border-color:white;
}
.datatable .even {
background-color:white;
}
.datatable .odd {
background-color:#EFEFEF;
}
.datatable .numeric {
text-align:right;
}
</style>
</head>
<body>
<table class="datatable">
<colgroup>
<col width="200">
<col width="120">
<col width="40">
</colgroup>
<tr class="odd">
<th>Name</th>
<th>Adresse</th>
<th>Alter</th>
</tr>
<tr class="even">
<td>Manfred Mueller</td>
<td>Karlshorst</td>
<td class="numeric">44</td>
</tr>
<tr class="odd">
<td>Mario Rehammer</td>
<td>Friedrichsfelde</td>
<td class="numeric">34</td>
</tr>
<tr class="even">
<td>Bernd Morfeld</td>
<td>Prenzlauerberg</td>
<td class="numeric">17</td>
</tr>
</table>
</body>
</html>
Jedoch entsteht logischerweise bei dem linken und dem rechten TH ein
Zwischenraum, den ich nicht gerne haben moechte. Die Zellen sollen direkt
an den Rahmen der Tabelle andocken.
Gibt es dafuer eine Moeglichkeit, ohne dabei jeweils der ersten und der
letzten Spalte eine eigene Klasse zu geben (zb border-left/right none) ?
Danke fuers Lesen.
MfG,
Sympatisant
achso, und first- bzw. last-child geht ja nicht im IE.
@@Sympatisant:
Du möchtest die 'border-collapse'-Eigenschaft dort anwenden, wo sie auch Wirkung zeigt? [CSS2 §17.6]
Live long and prosper,
Gunnar
Salvete,
Du möchtest die 'border-collapse'-Eigenschaft dort anwenden, wo
sie auch Wirkung zeigt?
Ja, sehr gerne ;-)
Danke fuer den Link.
Doch halte ich mich an den Text, und gebe der Tabelle diese Eigenschaft(*),
so bleibt der Rand der aeusseren THs jedoch noch erhalten, bzw, genauer
ausgedrueckt, wirkt der Rand der Tabelle fuer diese beiden Zellen nicht.
(*)
collpase: kein Rahmen bei den aeusseren THs
seperate: weisser Rahmen der THs dennoch sichtbar
inherit: ""
Gruss & Danke fuer deine Antwort!
MfG,
Sympatisant
@@Sympatisant:
so bleibt der Rand der aeusseren THs jedoch noch erhalten, bzw, genauer
ausgedrueckt, wirkt der Rand der Tabelle fuer diese beiden Zellen nicht.
Weil diese beiden Zellen über* der Tabelle liegen und dessen Rahmen den der Tabelle überdeckt.
Jetzt verstehe ich dein Problem: Du willst also allen 'th' außer dem ersten lediglich einen linken Rahmen geben:
th+th
{
border-left: 1px solid white;
}
Was aber auch in IrgendEinem Browser nicht geht.
Wenn dir das so wichtig ist, musste wohl dem ersten 'th' eine ID/Klasse geben.
Live long and prosper,
Gunnar
* in z-Richtung
Salvete,
danke feur deine Antwort.
Jetzt verstehe ich dein Problem: Du willst also allen 'th' außer dem
ersten lediglich einen linken Rahmen geben:
Exakt.
[..]
Was aber auch in IrgendEinem Browser nicht geht.
Gr, wie mich dieser "IrgendEine Browser" aber auch nervt..
Wenn dir das so wichtig ist, musste wohl dem ersten 'th' eine
ID/Klasse geben.
Es sieht halt nicht so schoen aus.
Aber das mit den Klassen habe ich dann schliesslich auch gemacht.
MfG,
Sympatisant