• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Spezielles Tabellengitternetz

C

cyberkuh

Neues Mitglied
Hey Leute,

also ich habe eine größere Tabelle, die vom Prinzip her so aussehen soll:
beispiel2e6f73f3jpg.jpg


Also ein Gitternetz zwischen Zellen, aber wirklich nur zwischen Zellen, also am Rand kein Rahmen.

Problem ist ja, dass:
- untere Zellen dürfen unten keinen Rahmen haben
- rechte Zellen dürfen rechts keinen Rahmen haben
- obere Zellen dürfen oben keinen Rahmen haben
- linke Zellen dürfen links keinen Rahmen haben
Klar könnte ich jetzt oben, links, rechts, unten jeweils eigene Klassen machen.

Aber das ist ja mal umständlich hoch 3 und irgendwie auch codetechnisch sehr unschön.

Fällt da jemandem ne elegantere Lösung ein?
 
Setze doch für die Tabelle keinen Rahmen (das wäre der Außenrahmen, der wegfällt) und für alle Zellen Rahmen unten und links. Für die Zellen in der rechten Spalte setzt Du eine Klasse rein die wiederum den linken Rahmen unterdrückt. Für die Zellen am unteren Ende der Tabelle setzt Du eine Klasse die den unteren Rahmen unterdrückt. Das wäre nach heutigem Stand Browserkompatibel und das einfachste.
 
Für sowas finde ich kann man alte IE auch ausschliessen, es schadet ja nicht. Dann könnte eine Lösung auch so aussehen:

HTML: 
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Test</title>
<style type="text/css">
table{
    border-collapse:collapse;
}
table td{
    border-left:1px solid green;
}
table td:first-Child{
    border-left:none;
}
table tr {
    border-top:1px solid green;

}
table tr:first-Child {
    border-top:none;
}
</style>
</head>
<body >
<table>

<tr>
<td>Zelle 1 </td>
<td>Zelle 2 </td>
<td>Zelle 3 </td>
</tr>
<tr class="odd">
<td>Zelle 1 </td>
<td>Zelle 2 </td>
<td>Zelle 3 </td>
</tr>
<tr>
<td>Zelle 1 </td>
<td>Zelle 2 </td>
<td>Zelle 3 </td>
</tr>
<tr class="odd">
<td>Zelle 1 </td>
<td>Zelle 2 </td>
<td>Zelle 3 </td>
</tr>

</table>

</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben