nicht angemeldet
Hallo,
Mit width:100% passt sie sich zwar wunderbar dem Fenster an, allerdings nur dann, wenn die benötigte Breite für die Spalten dies nicht überschreitet.
Mit table-layout:fixed werden aber leider alle Spalten gelich breit.
Anmerkung: In den Beispielen erreiche ich die Verringerung der 100% durch Verkleinern des Browserfensters.
Vorschlag 1: Kennst Du nicht wenigstens ungefähr die prozentuale Verteilung der Spaltenbreiten? Dann würde so etwas gehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
table {border:1px solid black; width:100%; table-layout:fixed;}
td {border:1px solid black;}
td p {margin:0; padding:0; white-space:nowrap; overflow:hidden;}
-->
</style>
</head>
<body>
<table>
<colgroup>
<col width="10%">
<col width="30%">
<col width="50%">
<col width="10%">
</colgroup>
<tr>
<td><p>Inhalt</p></td>
<td><p>langer Inhalt</p></td>
<td><p>noch längerer Inhalt</p></td>
<td><p>kurz</p></td>
</tr>
<tr>
<td><p>Inhalt</p></td>
<td><p>langer Inhalt</p></td>
<td><p>noch viel viel viel längerer Inhalt</p></td>
<td><p>kurz</p></td>
</tr>
</table>
</body>
</html>
Wie bekomme ich das nun am geschicktesten hin, dass die Spalten sich entsprechned ihrer benötigten Breite den Platz (100%) aufteilen. Dabei dürfen sie Spalten auch abgeschnitten werden.
Vorschlag 2: Naja, im Firefox ginge so etwas:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
table {border:1px solid black; width:100%;}
td {border:1px solid black;}
td p {margin:0; padding:0; white-space:nowrap; overflow:hidden;}
-->
</style>
</head>
<body>
<table>
<tr>
<td><p>Inhalt</p></td>
<td><p>langer Inhalt</p></td>
<td><p>noch längerer Inhalt</p></td>
<td><p>kurz</p></td>
</tr>
<tr>
<td><p>Inhalt</p></td>
<td><p>langer Inhalt</p></td>
<td><p>noch viel viel viel längerer Inhalt</p></td>
<td><p>kurz</p></td>
</tr>
</table>
</body>
</html>
Im IE natürlich Fehlanzeige.
viele Grüße
Axel