• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Simples Problem mit Tabellen-Zellen

B

blavov

Neues Mitglied
Hallo allerseits,
ich habe ein eigentlich recht simpel erscheinendes Problem mit Tabellen, in denen rowspan Verwendung findet. Hier erst einmal der Code-Schnipsel

HTML: 
<div style="width:300px">
<table border="1" width="100%"  >
<thead>
<th width="67%">Col 1</td><th width="33%">Col 2</td>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum 1</td><td rowspan="2">The quick brown fox jumps over the HTML table.</td>
</tr>
<tr>
<td>Lorem Ipsum 2</td>
</tr>
</tbody>
</table>
</div>

Das ganze sieht dann so aus (Firefox, IE9):

table1a.png

bzw. ungleichmäßiger verteilt in Opera und Chrome:

table1.png

Eigentlich möchte ich es aber genau umgekehrt:

table2.png

...also so, daß das untere linke Kästchen nur so groß wird, wie für den Text unbedingt notwendig, und das obere linke Kästchen den restlichen Platz einnimmt.

Dies bekomme ich bisher ausschließlich im Firefox hin - dort klappt das, wenn ich das linke untere Kästchen zu
HTML: 
<td style="height: 10px;">Lorem Ipsum 2</td>
ergänze. IE, Chrome und Opera ignorieren diese Angabe jedoch und zeigen weiterhin dasselbe an wie oben in den Bildern zu sehen.

Fällt jemandem eine Möglichkeit ein, dies so hinzubekommen, daß das auf allen Browsern einigermaßen gleich aussieht? Oder ist das einfach nicht vorgesehen?

Ciao und danke schonmal, Blavov.
 
Hallo,

Einer der Gründe warum man das Design nicht mit Tabellen machen sollte, ist, dass nicht alle Browser das gleiche Verhalten zeigen. Zudem sollte man keine Fehler zusätzlich noch einbauen. TH-Element war nicht geschlossen.
Alle CSS-Angaben sollten an zentraler Stelle definiert werden, nicht mischen mit Inlinestyles, das erschwert nur die Fehlersuche.

Diese Lösung hier funktioniert. Getestet in Chrome, Opera, IE8, Firefox:
HTML: 
<!DOCTYPE HTML>
<html>         
    <head>                 
        <meta charset=UTF-8>                 
        <title>Seitentitel
        </title>                 
        <style>           
        *{ margin:0; padding:0;}         
          
        table, tr, td, th {
            table-layout:fixed;
            border:1px solid black; 
        }
        .trsmall {
            height:11px;
        }
        .trbig{
            height:50px;
        }
        .thsmall{
            width:33%;
        }
        .thbig{
            width:67%;    
        }
        </style>         
    </head>         
    <body>             
        <div style="width:300px">
            <table id="test">
                <thead>
                    <th class="thbig">Col 1</th>
                        <th class="thbig">Col 2</th>
                </thead>
                <tbody>
                    <tr class="trbig"><td >Lorem Ipsum 1</td>
                        <td rowspan="2">The quick brown fox jumps over the HTML table.</td>
                    </tr>
                    <tr class="trsmall"><td >Lorem Ipsum 2</td>
                    </tr>
                </tbody>
            </table>
        </div>    
    </body>
</html>
 
Hallo zusammen,
erst einmal vielen Dank für den Lösungsansatz, den werde ich dann gleich mal auf der eigentlichen Seite ausprobieren. Nur kurz noch zu dem einleitenden Absatz:

Wustersoss schrieb:
Hallo,

Einer der Gründe warum man das Design nicht mit Tabellen machen sollte, ist, dass nicht alle Browser das gleiche Verhalten zeigen. Zudem sollte man keine Fehler zusätzlich noch einbauen. TH-Element war nicht geschlossen.
Alle CSS-Angaben sollten an zentraler Stelle definiert werden, nicht mischen mit Inlinestyles, das erschwert nur die Fehlersuche.
Zum Vergrößern anklicken....

Das Beispiel, das ich oben zitiert hatte, war nur für die Anfrage zusammengebastelt und sozusagen eine Barebones-Version der eigentlichen Webseite. Deswegen habe ich der Einfachheit halber auch Inline-Styleangaben benutzt, um die Änderung kürzer zitierbar zu machen - das Original benutzt ein zentrales CSS. Es ist auch nicht so, daß die gesamte Seite mit Tabellen gelayoutet ist; es geht hier um eine tabellarische Auflistung im Kernbereich des Seitenlayouts, die aus einigen Dutzend Blöcken der oben beschriebenen Art untereinander besteht.

Für den Fehler habe ich keine Ausrede, den habe ich beim schnellen Zusammenstellen des Beispiels im Texteditor selbst eingebaut und übersehen. :-)

Danke nochmals, Blavov.
 
Hallöchen nochmals,
Wustersoss schrieb:
Diese Lösung hier funktioniert. Getestet in Chrome, Opera, IE8, Firefox:
Zum Vergrößern anklicken....
Tut mir leid, aber das funktioniert leider nicht. Genauer: das funktioniert nur für dieses spezielle Textbeispiel. Wenn die rechte Spalte etwas mehr Text enthält, dann wird die untere Zeile wieder größer - und enthält die rechte Spalte weniger Text, so bleibt die obere Zeile trotzdem 50px groß, egal, was in der drinsteht. Getestet mit Opera, Chrome und Firefox (in dem die Zellen links bei mehr Text rechts gleichmäßig zu wachsen scheinen). Ist also leider keine Lösung für mein Problem. :sad:

Grüße, blavov
 
Was soll die Tabellenzelle denn sonst machen, ausser grösser werden wenn zuviel Text drinsteht. Wenn du das alles fix haben willst ohne das sich was verschiebt musst du das entsprechend angeben und für jede Zelle overflow:hidden ins Css schreiben. So richtig flexibel wird es wohl nicht, zumindest nicht wie du es haben willst.

Entweder Fix oder flexibel, beides wird schwierig. Ich würde es ohne Tabelle umsetzen in dem Fall.
 
Erneut Hallöchen,
Wustersoss schrieb:
Was soll die Tabellenzelle denn sonst machen, ausser grösser werden wenn zuviel Text drinsteht.
Zum Vergrößern anklicken....

Ich glaube, hier habe ich mich mißverständlich ausgedrückt - jedenfalls beziehen wir uns nicht auf die gleiche Tabellenzelle. Natürlich soll die rechte Spalte größer werden, wenn sie mehr Text enthält - das habe ich nie anders gewollt. Überhaupt ist die rechte Spalte ja gar nicht mein Problem.

Und natürlich kann die linke Seite der Tabelle nicht einfach kleiner bleiben als die rechte - dafür gebe ich ja rowspan="2" schließlich an. Auch das ist überhaupt nicht mein Problem.

Die Aufteilung dieses Wachstums auf die Tabellenzellen der linken Seite ist es, worum es mir geht. Ich habe dort zwei Zellen, von denen die untere immer nur ganz wenig Text enthält - so wenig, daß es in eine Zeile mit 10px Höhe passen würde. Die obere hingegen enthält mal mehr, mal weniger Text. Deswegen möchte ich, daß diese den gesamten Raum der rechten Spalte - minus die 10px der unteren Zelle - einnimmt, egal, wie viel das sein mag oder wie viel Text die obere linke Zelle nun tatsächlich enthält. Für mich ist das eine typische Tabellenanordnung (die Inhalte stammen tatsächlich aus einer Nicht-HTML-Tabelle), weswegen mich es ja verwundert, daß so etwas einfaches mit HTML-Tabellen und CSS nicht gehen soll. Aber alle meine Versuche führen entweder zu in gleichem Maße wachsenden Zellen, meistens aber zu einer kleinen, festen oberen und größer werdenden unteren Zelle - also genau das Gegenteil von dem, was ich haben möchte.

Ist so eine Anordnung ohne Verwendung einer Tabelle (also mit <div>-Boxen o.ä.) wirklich möglich, ohne daß es dabei - je nach Umfang der Textinhalte, der rechts und oben links halt sehr stark schwankt, unten links aber fast gar nicht) zu anderen Darstellungsproblemen kommt?

Grüße und Dank, blavov.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben