Zur Navigation

Tabelle mit CSS in XHTML

1 Gustafsson

Moin,

ist dies für XHTML 1.0 Transitional so korrekt ? Hab ich das richtig verstanden das overflow:hidden den Umbruch des Textes erzwingt wenn der Text länger als die Zelle ist ?

table { width:100%; table-layout:fixed; caption-side:top; margin: 20px 0 20px 0;}

td { border:0px solid #fff; vertical-align:top; overflow:hidden; padding: 10px 0 10px 0;}


<table>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
</table>

Gruß Uwe

14.03.2008 19:38

2 Jörg Kruse

Hallo Uwe,

bei overflow:hidden wird übergroßer Inhalt abgeschnitten.

Der Text sollte aber von sich aus umgebrochen werden, wenn du eine feste Breite für die Tabellenzellen (bzw. Spalten) definierst

14.03.2008 19:44

3 Gustafsson

table { width:100%; table-layout:fixed;


Reicht dann also nicht aus ??

Gruß Uwe

14.03.2008 19:52

4 Jörg Kruse

table-layout:fixed sollte eigentlich zusammen mit width (der Tabellenzellen) verwendet werden.

Zitat von SELFHTML
Der Einsatz des Wertes fixed hat zur Folge, dass sich die Zellenbreite nicht wie herkömmlich an deren Inhalt orientiert, sondern an der mittels width explizit vorgegebenen Breite der Spalten der ersten Zeile.

14.03.2008 20:09

5 Gustafsson

Also dann so... ???

table { width:100%; table-layout:fixed; caption-side:top; margin: 20px 0 20px 0;}

td { width:25%; border:0px solid #fff; vertical-align:top; overflow:hidden; padding-top: 5px;}

Nächste Frage ;-) nun hätte ich aber ganz gern, das Inhalt 1 und Inhalt 2 etwas näher zusammenrücken

<table>
<tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
<td>Inhalt 3</td>
<td>Inhalt 4</td>
</tr>
</table>

Gut, das könnte ich mit

<td style="width: 120px;">

im Quelltext selber machen, aber geht es auch eleganter via CSS ? Die gesamte Tabelle sollte aber schon 100% haben


Gruß Uwe

14.03.2008 20:25

6 Gustafsson

Und nun hab ich das hier gefunden (jendryschik), so sollte es doch auch gehen, oder?

<table>
<caption>Bla Bla Bla</caption>
<colgroup>
<col width="15%" />
<col width="25%" />
<col width="30%" />
<col width="30%" />
</colgroup>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
<th>Überschrift 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
<td>Inhalt 3</td>
<td>Inhalt 4</td>
</tr>
<tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
<td>Inhalt 3</td>
<td>Inhalt 4</td>
</tr>
<!-- weitere Zeilen -->
</tbody>
</table>

CSS

table { width:100%; border:0px; table-layout:fixed; caption-side:top; margin: 20px 0 20px 0;}

td { border:0px solid #fff; vertical-align:top; overflow:hidden; padding-top: 5px;}

Gruß Uwe

14.03.2008 20:37 | geändert: 14.03.2008 20:38

7 Jörg Kruse

Zitat von Gustafsson
Also dann so... ???

table { width:100%; table-layout:fixed; caption-side:top; margin: 20px 0 20px 0;}

td { width:25%; border:0px solid #fff; vertical-align:top; overflow:hidden; padding-top: 5px;}

Ja

Nächste Frage ;-) nun hätte ich aber ganz gern, das Inhalt 1 und Inhalt 2 etwas näher zusammenrücken

<table>
<tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
<td>Inhalt 3</td>
<td>Inhalt 4</td>
</tr>
</table>

Gut, das könnte ich mit

<td style="width: 120px;">

im Quelltext selber machen, aber geht es auch eleganter via CSS ? Die gesamte Tabelle sollte aber schon 100% haben

Was meinst du mit eleganter? Du kannst die 120px Breite für Tabellenzellen auch zentral definieren - dann ist die Tabelle allerdings auch nur 480px breit. Wenn die Spalten verschiedene, feste Breiten haben sollen udn die Tabelle nur auf einer Seite vorkommt, reicht es, diese (wie in deinem Beispiel) in den Zellen der ersten Zeile anzugeben. Wenn die Tabelle auf mehreren Seiten integriert ist, wäre es nicht verkehrt, für die Zellen IDs oder Klassen festzulegen und darüber die Breiten zentral zu definieren

14.03.2008 20:37

8 Jörg Kruse

Ja, du kannst das auch über eine colgroup machen - hier gibt es mehrere Wege nach Rom ;)

14.03.2008 20:39

9 Gustafsson

Sieht gut aus ;-) richtig schick. Ja ja, ich habe Feuer gemacht - aber Jörg Du bist mein Held ;-)

Gruß Uwe

14.03.2008 21:27

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]