Felix Riesterer: <table> über Bildschrimrand hinaus darstellen

Beitrag lesen

SELF-Forum

<table> über Bildschrimrand hinaus darstellen

Felix Riesterer Homepage des Autors
– Informationen zu den Bewertungsregeln

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.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Beitrag melden
–
Informationen zu den Bewertungsregeln