nicht angemeldet
Tabellen einpassen
Hello,
ich habe da mal wieder einen Denkknoten bei der Tabellenformatierung mittels CSS.
Es werden Tabellen mit n Spalten dargestellt. Umbruch in der Zelle ist mittels
td,th
{
white-space:nowrap;
}
ausgeschaltet
Die Tabelle hat die Class="list"
.list
{
/*table-layout:fixed;*/
width:100%;
}
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.
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.
Kann man mit CSS auch eine minimale und eine maximale Spaltenbreite festlegen? Wäre doch genial, wenn ich das nur übersehen hätte ;-))
Harzliche Grüße vom Berg
http://www.annerschbarrich.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
-
Hallo!
min-width und max-width bzw. height gibt es.
Das wird dir aber nicht viel helfen denke ich.
Der IE macht das glaube auch nicht mit.
Grüße, Matze -
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
-
Hello Axel,
vielen dank für die umfangreiche Antwort.
Vorschlag 1: Kennst Du nicht wenigstens ungefähr die prozentuale Verteilung der Spaltenbreiten? Dann würde so etwas gehen:
Dann werde ich das doch in das Tool für die Liste einbauen müssen.
Lieber wäre mir eine reine CSS-Lösung ...Im IE natürlich Fehlanzeige.
Ja, da habe ich so diverse Experimente durch.
Die letzten hier veröffentlichten sind aber bestimmt 9 Monate her...Harzliche Grüße vom Berg
http://www.annerschbarrich.deTom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
-