nicht angemeldet
Hübsch formatierte Datentabelle
Hej,
ich komm nicht recht weiter mit diesem Tabellenlayout (Siehe Link). Es muss eine Tabelle sein, da tabellarische Daten drinstehen. Klingt blöd, aber so ists. Da ich ausserdem nicht weiß, welche Daten in die Zellen kommen, brauche ich das stabile Gitter der Tabelle. Ansonsten könnten die Reihen verrutschen.
Das Hauptproblem (auf dem Lösungsweg der mir bisher vorschwebt) ist, dass ich keinen Weg finde das horizontale Padding der TDs unabhängig vom vertikalen Padding zu setzen. Dann würde ich mit verschiedenen Border-Definitionen für erste, mittlere und letzte Tabellen-Reihen die äußeren Ränder und mit SPANS, die auf BLOCK und 100% Breite gesetzt sind die Gitterlinien machen.
Wichtig ist, sonst wäre es ja zu einfach, dass zwischen den COLs ein akzeptabler Abstand ist, das die Linien keine Unterbrechung haben und die Gitterlinien nicht an den äußeren Rand stoßen.
Wenn möglich sollte die Lösung mit XHTML 1.0 Transitional validieren;)
Ich habe auch schon mit dem frame und rules Table-Attributen gespielt und border-spacing. Leider scheinen Browser (Mozilla 1.5, IE6 auf PC) auch keine border Auszeichnungen in COLs zu akzeptieren, obwohl ich erst mal in den XHTML und CSS Spezifikationen nichts gefunden habe das dagegen sprechen würde.
Wenn jemand weiterweis bin ich ihm dankbar.
-
Sollte heißen: ... dass ich keinen Weg finde das horizontale *Margin* der TDs unabhängig vom vertikalen *Margin* zu setzen...
-
Hallo,
Sollte heißen: ... dass ich keinen Weg finde das horizontale *Margin* der TDs unabhängig vom vertikalen *Margin* zu setzen...
TH/TDs haben kein margin, sondern nur border und padding.
Ist fuer mich irgendwie logisch, und steht auch in der Spec.:
http://www.w3.org/TR/REC-CSS2/tables.html#q7
"Like other elements of the document language, internal table
elements generate rectangular boxes with content, padding,
and borders. They do not have margins, however."Gruesse,
Thomas
-
-
Hallo,
Leider scheinen Browser (Mozilla 1.5, IE6 auf PC) auch keine border Auszeichnungen in COLs zu akzeptieren, obwohl ich erst mal in den XHTML und CSS Spezifikationen nichts gefunden habe das dagegen sprechen würde.
IE kann das in der Tat nicht, aber Opera und Mozilla schon: du kannst aber border für <col> nur denn definieren wenn du border-collapse:collapse; verwendest, dann kannst du aber wiederum keinen border-spacing; setzen.
Wichtig ist, sonst wäre es ja zu einfach, dass zwischen den COLs ein akzeptabler Abstand ist, das die Linien keine Unterbrechung haben und die Gitterlinien nicht an den äußeren Rand stoßen.
Wenn möglich sollte die Lösung mit XHTML 1.0 Transitional validieren;)
Das höchste was du relative einfach machen kannst ist folgendes:
Grüße
Thomas
----------------------------------<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
.myTable {
table-layout:fixed;
border:solid 1px silver;
empty-cells:show;
width:200px;
margin-right:20px;
float:left;
}
td {
border-bottom:solid 2px silver;
}
</style>
</head>
<body>
<div>
<table class="myTable" cellspacing="20">
<tr><td>Lorem ipsum dolor sit amet</td></tr>
<tr><td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt.</td></tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Nulla sit amet urna in est
gravida interdum. Aenean suscipit. Vestibulum non augue. Vivamus luctus enim ac nunc adipiscing dictum.
Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna
</td>
</tr>
</table>
<table class="myTable" cellspacing="10">
<tr><td>Lorem ipsum dolor sit amet</td></tr>
<tr><td>Lorem ipsum dolor sit amet,</td></tr>
<tr><td>Lorem ipsum dolor sit amet,</td></tr>
</table>
<table class="myTable" cellspacing="10">
<tr><td>Lorem ipsum dolor sit amet</td></tr>
<tr><td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt.</td></tr>
<tr><td></td></tr>
</table>
</div>
</body>
</html>