<table> über Bildschrimrand hinaus darstellen

[Nick]

Hallo liebe Leut,

ich versuche gerade eine variable Tabllenbreite zu gestallten.
Es geht um einen Terminkalender, der OHNE eingetragene Termine eine Breite von 750px hat und somit leicht innerhalb meines <iframes> dargestellt werden kann.

Mit jedem Termin, der in der gleichen Uhrzeit stattfindet, also mehrere Paralleltermine, werden diese Termine auch nebeneinander ausgegeben und der Kalender wird entsprechend breiter. (innerhalb der <td>s habe ich <div>-Elemente zur Termindarstellung genuztzt)

Soweit funktioniert das auch alles, nur sobald die <table> größer als der Bildschrimbereich ist, macht sie sich nicht weiter breiter und alles wird konfus dargestellt, da Zeilen umgebrochen werden.
Sobald ich der <table> eine feste Breite von z.B. 2000px verpasse, erhalte ich meinen gewünschten Scrollbalken. Aber ich möchte ja keine FESTE Breite.

Mein Problem ist also, dass die <table> bei "nicht festgelegter Breite" maximal NUR bis zum angezeigten Bildschirmrand wächst und weiter nicht.

Ich hoffe ich konnte mein Problem einigermaßen rüberbringen, sodass ich vielleicht hilfreiche Tipps von Euch bekomme.

Besten Gruß und vielen Dank

Nick

[Nick]

Gibt es nicht irgend eine Möglichkeit die Höhe der Tabellenzellen auf 25px zu fixieren?

Wenn ich das hin bekäme, dürfte ja kein Umbruch mehr erlaubt sein und es MUSS in die Breite gegangen werden.

So wäre das Problem auch elöst...

[bleicher]

Grüße,
zeig mal dein css oder ersetze width durch min-width und verzichte auf iframes.

MFG
bleicher

[Nick]

So,

ich habe mal ein Beispiel gebaut:
(Könnt Ihr so als xy.pdf speichern und direkt ausführen)

[...
<?PHP
echo"<center><table style="table-layout:fixed:background:black;">";
echo"<tr>";
echo"<td style="width:60px;height:25px;background:grey;text-align:center;">ZEIT</td>";
echo"<td colspan="2" style="min-width:120px;height:25px;background:grey;text-align:center;">Montag</td>";
echo"<td colspan="2" style="min-width:120px;height:25px;background:grey;text-align:center;">Dienstag</td>";
echo"<td colspan="2" style="min-width:120px;height:25px;background:grey;text-align:center;">Mittwoch</td>";
echo"<td colspan="2" style="min-width:120px;height:25px;background:grey;text-align:center;">Donnerstag</td>";
echo"<td colspan="2" style="min-width:120px;height:25px;background:grey;text-align:center;">Freitag</td>";
echo"<td colspan="2" style="min-width:120px;height:25px;background:grey;text-align:center;">Samstag</td>";
echo"<td colspan="2" style="min-width:120px;height:25px;background:grey;text-align:center;">Sonntag</td>";
echo"</tr>";
echo"<tr>";
echo"<td style="width:60px;height:25px;background:grey;">08:00</td>";
echo"<td><div style="float:left;min-width:100px;height:25px;text-align:center;"></div></td><td><a href="test.php" title="Hier kann man einen neuen Termin eintragen"><div style="float:left;min-width:20px;height:25px;text-align:center;">...</div></a></td>";
echo"<td><div style="float:left;min-width:100px;height:25px;background:green;text-align:center;">[Termin]</div><div style="float:left;min-width:100px;height:25px;background:green;text-align:center;">[Termin]</div></td><td><a href="test.php" title="Hier kann man einen neuen Termin eintragen"><div style="float:left;min-width:20px;height:25px;text-align:center;">...</div></a></td>";
echo"<td><div style="float:left;min-width:100px;height:25px;text-align:center;"></div></td><td><a href="test.php" title="Hier kann man einen neuen Termin eintragen"><div style="float:left;min-width:20px;height:25px;text-align:center;">...</div></a></td>";
echo"<td><div style="float:left;min-width:100px;height:25px;background:green;text-align:center;">[Termin]</div></td><td><a href="test.php" title="Hier kann man einen neuen Termin eintragen"><div style="float:left;min-width:20px;height:25px;text-align:center;">...</div></a></td>";
echo"<td><div style="float:left;min-width:100px;height:25px;background:green;text-align:center;">[Termin]</div><div style="float:left;min-width:100px;height:25px;background:green;text-align:center;">[Termin]</div></td><td><a href="test.php" title="Hier kann man einen neuen Termin eintragen"><div style="float:left;min-width:20px;height:25px;text-align:center;">...</div></a></td>";
echo"<td><div style="float:left;min-width:100px;height:25px;text-align:center;"></div></td><td><a href="test.php" title="Hier kann man einen neuen Termin eintragen"><div style="float:left;min-width:20px;height:25px;text-align:center;">...</div></a></td>";
echo"<td><div style="float:left;min-width:100px;height:25px;text-align:center;"></div></td><td><a href="test.php" title="Hier kann man einen neuen Termin eintragen"><div style="float:left;min-width:20px;height:25px;text-align:center;">...</div></a></td>";
echo"</tr>";
echo"</center></table>";
?>
...]

Bei einer Auflösung von 1680x1050 wird die Tabelle wie gewünscht dargestellt: Die Tabellenspalten haben die gewünschte Höhe von 25px und es werden alle Termine nebeneinander ausgegeben.

Wenn man nun jedoch das Fenster verkleinert z.B. 1024x768, wird die zweite Spalte (08:00) auf 50px vergrößert und die Termine werden nicht mehr nebeneinander, sondern untereinander dargestellt.

Ich würde mir jedoch wünschen, dass die Spaltenhöhe weiterhin auf 25px bleibt und stattdessen ein Scrollbalken eingeblendet wird, mit dem ich mir die "intakte" Tabelle ansehen kann.

Das muss doch möglich sein *raufdiehaareaus*

Besten Gruß und in Hoffnung auf Lösungsansätze...

[bleicher]

Grüße,

1. poste kein PHP, und wiseo "als .pdf speichern?" wir brauche hier html/css
2. stell das online - wenn du tipps zum schnellen testen brauchst, rate ich dir gern was. kein mensch wird sich jetzt mühe machen dein zeug von phptags zu berienigen und abzuspeichern. du brauchst hilfe also sei auch entgegenkommend.
   3)keine inline styles, styles gehören in eine CSSdatei, du nähst ja deine klamotten auch nciht an den körper
   4)wozu überhaupt php? ich seh da nix dynamisches.

MFG
bleicher

[Nick]

Grüße,

1. poste kein PHP, und wiseo "als .pdf speichern?" wir brauche hier html/css
2. stell das online - wenn du tipps zum schnellen testen brauchst, rate ich dir gern was. kein mensch wird sich jetzt mühe machen dein zeug von phptags zu berienigen und abzuspeichern. du brauchst hilfe also sei auch entgegenkommend.
   3)keine inline styles, styles gehören in eine CSSdatei, du nähst ja deine klamotten auch nciht an den körper
   4)wozu überhaupt php? ich seh da nix dynamisches.

MFG
bleicher

Alles Klar Herr Kaleun! - Wie der Herr es wünscht:

Über folgende Adresse könnt Ihr also nun mein Sample aufrufen in Form einer HTML!

http://www.alternative-heilungsmethoden.de/testumgebung/test.html

Noch mal kurz zur Aufgabenstellung:
ich möchte gerne Sieben Tage nebeneinander ausgeben, wobei der Inhalt zu den Tagen beliebig groß sein kann. Hauptpriorität liegt auf der Spaltenhöheder einzelnen Uhrzeiten, die 25px nicht überschreiten darf. Des Weiteren soll der Tagesname immer zentriert über den gegebenen Tagesinhalten platziert werden, egal wie viele Termine liegen.

Solltet Ihr also Ideen haben, immer her damit. Auch ohne <table> oder mit sonst irgendwelche neuen Elementen oder herangehensweisen...

Vielen Dank vorab

Gunther (alias Nick ;))

[Felix Riesterer]

Lieber Gunther,

http://www.alternative-heilungsmethoden.de/testumgebung/test.html

Dein Code enthält sehr viel Unsinn. Ein Beispiel:

<td><div class=blank></div></td>

Das geht auch kürzer: <td class="blank"></td>

1.) Attributwerte konsequent in doppelte Anführungszeichen schreiben
2.) <div>-Elemente ausschließlich zum Gruppieren anderer Block-Elemente benutzen
3.) <center>-Elemente gehören auf den Müll!
4.) <body class="body"> ist redundant und absolut zu vermeiden!
5.) Tabellen können auch <th>-Elemente enthalten, auch wenn das für manche "uncool" ist.

Noch mal kurz zur Aufgabenstellung:
ich möchte gerne Sieben Tage nebeneinander ausgeben, wobei der Inhalt zu den Tagen beliebig groß sein kann.

Also jeder Tag kann mehrere Termine haben. OK. Sind trotzdem mehrere Termine am selben Tag zur selben Uhrzeit möglich, so sollen diese gezwungenermaßen in derselben Zeile einzeilig bleiben. Auch klar. Damit verstößt Du aber von Deiner Aufgabenstellung her gegen die prinzipielle Darstellungsweise von Webseiten, die nach unten hin variabel lang werden können, da ihre Breite je nach Anzeigemedium begrenz ist, ihre Höhe aber per Scrollbar beliebig sein darf.

Solltet Ihr also Ideen haben, immer her damit.

Du suchst im Grunde nach der "white-space"-Eigenschaft, mit der Du die endlose Länge Deiner Zeilen erzwingen kannst. Ich habe Dir hier etwas zusammengenagelt, das Dir weiterhelfen sollte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
    <title>Tabellenproblem!</title>  
    <style type="text/css">/*<!CDATA[*/  
        body { background:grey; }  
        table, th, td { border: 2px solid white; border-collapse: collapse; margin: auto; }  
        th { min-width: 120px; max-height: 25px; text-align:center; }  
        td { max-height: 25px; background: white; white-space: nowrap; }  
        span { display: inline-block; min-width: 100px; text-align: center; background: green; }  
        a { float: right; min-width: 20px; text-align: center; }  
    /*]]>*/</style>  
</head>  
<body>  
    <table>  
        <tr>  
            <th>ZEIT</th>  
            <th>Montag</th>  
            <th>Dienstag</th>  
            <th>Mittwoch</th>  
            <th>Donnerstag</th>  
            <th>Freitag</th>  
            <th>Samstag</th>  
            <th>Sonntag</th>  
        </tr>  
        <tr>  
            <th>08:00</th>  
            <td><a href="kalender.html">...</a></td>  
            <td><a href="test.html">...</a><span>[Termin]</span><span>[Termin]</span></td>  
            <td><a href="test.html">...</a></td>  
            <td><a href="test.html">...</a><span>[Termin]</span></td>  
            <td><a href="test.html">...</a><span>[Termin]</span><span>[Termin]</span><span>[Termin]</span></td>  
            <td><a href="kalender.html">...</a></td>  
            <td><a href="kalender.html">...</a></td>  
        </tr>  
    </table>  
</body>  
</html>

Liebe Grüße,

Felix Riesterer.

[Cheatah]

Hi,

5.) Tabellen können auch <th>-Elemente enthalten, auch wenn das für manche "uncool" ist.

öhm, wer bezeichnet Semantik bitte als uncool?

6.) <thead> ist eine tolle Erfindung! In Folge davon natürlich auch <tbody>.

Cheatah

[Gunnar Bittersmann]

@@Cheatah:

nuqneH

5.) Tabellen können auch <th>-Elemente enthalten, auch wenn das für manche "uncool" ist.

öhm, wer bezeichnet Semantik bitte als uncool?

6.) <thead> ist eine tolle Erfindung! In Folge davon natürlich auch <tbody>.

7.) Mikroformate sind eine tolle Erfindung! Damit kann man einen Termin auch als solchen auszeichnen.

Der Nutzer kann dann gleich einen Termin in seinen persönlichen Kalender übernehmen, wenn ihm sein UA diese Funktionalität zur Verfügung stellt.

Qapla'

[ChrisB]

Hi,

http://www.alternative-heilungsmethoden.de/[...]

Dein Code enthält sehr viel Unsinn.

Domainnomen est omen.

MfG ChrisB

[Nick]

Hallo Felix,

super, so klappt es Prima!

Vielen Dank für Deine Mühe und Geduld

Gruß Gunther

[Vinzenz Mai]

Hallo,

Soweit funktioniert das auch alles, nur sobald die <table> größer als der Bildschrimbereich ist, macht sie sich nicht weiter breiter und alles wird konfus dargestellt, da Zeilen umgebrochen werden.

siehe </archiv/2008/9/t176589/#m1162551>.

Freundliche Grüße

Vinzenz

[Nick]

Also wenn ich das jetzt richtig verstanden habe, ist das Problem bereits bekannt und es gibt keine Abhilfe dafür... :(

Äußerst uncool - aber Danke für den Artikellink