✔ Tabellen: Zellenrahmen definieren

Status
Nicht offen für weitere Antworten.
saftmeister

saftmeister

Nutze den Saft!
Hallo,

ich bräuchte mal einen Rat, wie ich folgendes lösen kann. Ich habe eine Tabellen-Klasse definiert:

Code: 
table.normaleTabelle {
  border-spacing: 0px;
}

table.normaleTabelle td {
  border: 1px solid black;
}

Nun habe ich aber das Problem, dass der untere Border einer Zelle + dem oberen Border einer Zelle addiert wird, und ich damit einen doppelten Border bekomme, was mir nicht so besonders gefällt. Natürlich könnte ich bei jeder Zelle den unteren Border weg lassen. Was aber schlecht bei der untersten Zeile der Tabelle wäre, diese hätte somit keinen unteren Rahmen. Die Tabelle wird dynamisch aufgebaut. Ich kann also auch keine gesonderte Klasse für die unterste Zeile festlegen. Bzw. das ginge schon, wäre aber ein enormer Implementierungsaufwand.

Kennt jemand eine schnellere Lösung für dieses Problem?

Danke und Grüße
 
Hi,

CSS: 
table.normaleTabelle {
  border-spacing: 0px;
  border-collapse: collapse; /* Zellenrahmen fallen zusammen */
}
... schneller geht's kaum :)

Beachte bitte, dass border-spacing in der IE-Familie erst seit dem IE8 unterstützt wird.

mfg Maik
 
Das Äquivalent zur border-spacing-Eigenschaft ist das cellspacing-Attribut im <table>-Tag.

mfg Maik
 
Dies war eigentlich nur ein grundsätzlicher Tipp, denn unabhängig von border-spacing:0 fallen mit der Ergänzung border-collapse:collapse in deinem Stylesheet auch im IE6 u. IE7 die Rahmen der Tabellenzellen zusammen:
HTML: 
<table class="normaleTabelle">
       <tr><td>foo</td></tr>
       <tr><td>bar</td></tr>
</table>


mfg Maik
 
Falls du in der Zukunft mal mit border-spacing einen Abstand im Tabellengerüst erzeugen, aber den älteren IE-Versionen kein HTML-Attribut mit auf dem Weg geben möchtest, kannst du hier auf http://code.google.com/p/ie7-js/ zurückgreifen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-09-19">

<title>tutorials.de | demo_saftmeister</title>

<style type="text/css">
table.normaleTabelle {
  border-spacing: .5em;
}
table.normaleTabelle, table.normaleTabelle td {
  border: 1px solid black;
}
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

</head>
<body>

<table class="normaleTabelle">
       <tr><td>foo</td></tr>
       <tr><td>bar</td></tr>
</table>

</body>
</html>


mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück