✔ table height

[Thomasio]

Ich versuche krampfhaft in einer Tabelle mit Untertabellen passende Höhen zu berechnen.
Ich kann nicht mal genau sagen, woran es liegt, aber abhängig vom verwendeten Browser und der Hintergrundfarbe bekomme ich immer andere Ergebnisse.
Firefox ist noch relativ einfach zu handhaben, aber im IE macht es sogar Unterschiede, ob in einer Zelle etwas Sichtbares drin steht oder nichts oder nur  .

Ich möchte einfach nur 2 Tabellen mit jeweils nur einer Spalte, deren Höhe voneinander abhängig ist.

Tabelle 1:

$zeilen = x; // ein durch 3 teilbarer Wert zwischen 6 und 999

print <<<END
<table>
END;

for($i = 0; $i < $zeilen; $i++)
{
print <<<END
<tr>
<td height="25" border="1">
Irgendwas
</td>
</tr>
END;
}

print <<<END
</table>
END;

Tabelle 2:

$zeilen = $zeilen / 3;
$height = ?; // hier liegt das Problem

print <<<END
<table>
END;

for($i = 0; $i < $zeilen; $i++)
{
print <<<END
<tr>
<td height="$height" border="1">
&nbsp;
</td>
</tr>
END;
}

print <<<END
</table>
END;

Eine Zeile in Tabelle 2 soll inkl. Rahmen genauso hoch sein wie 3 Zeilen in Tabelle 1 inkl. Rahmen.
Insgesamt sollen beide Tabellen inkl. aller Rahmen genau gleich hoch sein.

Offensichtlich passt $height="75" nicht, weil in Tabelle 1 zwischen jeweils 3 Zellen 2 Rahmen mehr sind als in Tabelle 2.
Ich habe es einfach ausprobiert und nachgemessen, bei border="1" komme ich auf height="79".
Das passt auch fast immer, allerdings haben die Zellen je nach Browser, Hintergrundfarbe und Inhalt der Zelle immer andere Höhe.
In Tabelle 1 irgendwas zwischen 23px plus Rahmen und 27px plus Rahmen.
In Tabelle 2 irgendwas zwischen 77px plus Rahmen und 81px plus Rahmen.

Es ist mir egal wie ich es anstellen muss, CSS oder JavaScript oder sonstwas an umständlicher Berechnung in PHP, ich brauche nur eine Lösung, die in Firefox genauso passt wie im IE, egal ob in den Zellen etwas drin steht oder nicht.

Hat jemand eine Idee?

 

[threadi]

Ich würde mal anders ran gehen:
Wieso brauchst Du überhaupt Tabellen?
Scheinbar besteht jede Tabelle ja nur aus einzelnen Spalten - das macht keinen Sinn für tabellarische Daten. Wieso verwendest Du kein <ul> z.B.? Was steht eigentlich in den Spalten als Inhalt drinne?
Und: was willst Du rein grafisch erreichen?

 

[Thomasio]

Die Tabellen sind Untertabellen einer Haupttabelle und das sind effektiv nicht nur 2, sondern bis zu 11 Untertabellen.
Die Haupttabelle enthält bis zu 11 Spalten a 3 Zeilen, wobei jeweils in der dritten Zeile die entsprechende Untertabelle steht.
Der Inhalt einzelner Zellen ist sehr kurz, max 15 Zeichen.
Erreichen will ich damit eine Gesamttabelle, wo (mit 2 Zeilen Überschrift) von links nach rechts jeweils 3 Zeilen zu einer zusammengefasst werden, wobei die Gesamttabelle einen Rahmen aussen drumrum hat, die Untertabellen aber nur Rahmen um alle Zellen.
Grafisch sollten natürlich von rechts aus gesehen die Zellen nicht nur genauso hoch sein, sondern auch auf derselben Höhe stehen, wie die zugehörigen 3 Zellen links davon.
Als Tabelle habe ich das gemacht, weil ich mich damit am besten auskenne, insbesondere mit Hintergründen, von einfacher Farbe bis Grafik.
Einige Zellen haben als Inhalt eine variable Hintergrundgrafik, die ich mit CSS passend zoome, diese Zellen müssen klickbar sein und auch noch auf Mouse Events reagieren, um z.B. die Hintergrundgrafik zu wechseln oder ein Stück JavaScript auszuführen.

 

[tombe]

Ich bin mir jetzt nicht sicher ob es das ist was du suchst, aber die Tabellen sind auf jeden Fall immer gleich hoch:

<?php $zeilen = 6; ?>
<table border="1" cellpadding="5" cellspacing="0" summary="" style="height: 25;">
    <tr>
        <td>
            <table border="1" cellpadding="0" cellspacing="0" summary="" style="height:100%;">
            <?php
            for ($a = 1; $a <= $zeilen; $a++) {
                $hoehe = $a < $zeilen ? '25': '100%';
                echo "<tr><td height='$hoehe' width='100'>$a</td></tr>\n";
            }
            ?>
            </table>
        </td>
        <td>
            <table border="1" cellpadding="0" cellspacing="0" summary="" style="height:100%;">
            <?php
            for ($a = 1; $a <= $zeilen; $a++) {
                $hoehe = $a < $zeilen ? '25': '100%';
                echo "<tr><td height='$hoehe' width='100'>" .str_repeat("XXX XX X ", $a) ."</td></tr>\n";
            }
            ?>
            </table>
        </td>
    </tr>
</table>

str_repeat ist nur drin damit in der zweiten Tabelle mehr/etwas anderes steht als in der ersten!

 

[Thomasio]

Nein, das passt leider nicht.
Die Untertabellen sind zwar gleich hoch, wegen style="height:100%;"
aber die Untertabellen haben keinen Rahmen, nur die Zellen in den Untertabellen haben einen Rahmen.
Der Effekt von deinem Code ist dann, dass die Zeilen in der zweiten Tabelle vertikal zentriert werden, aber ganz oben und ganz unten ein Loch bleibt.
Darum muss in der zweiten Untertabelle etwa stehen:

$hoehe = 75 + 2x Rahmen

Nachdem FF und IE aber aus 25x Höhe irgendwas (verschiedenes) zwischen 23px und 27px plus Rahmen machen passt auch 75 plus 2x Rahmen nicht, sondern kann irgendwas zwischen
69px und 81px plus 2x Rahmen sein.

 

[tombe]

...aber die Untertabellen haben keinen Rahmen, nur die Zellen in den Untertabellen haben einen Rahmen...

Also ich verstehe nur Bahnhof.

Kannst du zum besseren Verständnis vielleicht mal ein Bild machen und hier einstellen wo man dann erkennen kann wie die Tabelle aussehen soll.
Die Umrandung die wirklich dargestellt werden soll machst du dann mit durchgehenden Linien, die Linien die nur dazu da sind um Tabellen/Zellen sichtbar zu machen, machst du gestrichelt.

 

[Thomasio]

Ich versuchs mal.
Angehängt habe ich jetzt beides, links was IE draus macht und rechts was FF draus macht.
Da sieht man auf den ersten Blick schon, dass FF das Ganze insgesamt kleiner darstellt, aber das ist kein Problem.
Rot eingerahmt habe ich die beiden Untertabellen, und da liegt das Problem, denn da macht IE die zweite Tabelle zu kurz, während FF es richtig macht.

Code ist in beiden Fällen identisch, und weils einfacher zu überschauen ist, mal ohne PHP sondern vom tatsächlichen HTML Quelltext:

<body bgcolor="#406090">

<table width="300" align="center" border="1">

<! Kopfzeile >

<tr>
<td width="150" align="center" bgcolor="#486ca3">
&nbsp;
</td>
<td width="150" align="center" bgcolor="#486ca3">
&nbsp;
</td>
</tr>

<! Zeile für Untertabelle >

<tr>
<td>

<! Untertabelle links >

<table border="1" width="150">

<tr>
<td width="150" valign="middle" height="25">
&nbsp;
</td>
</tr>

<tr>
<td width="150" valign="middle" height="25">
&nbsp;
</td>
</tr>

<tr>
<td width="150" valign="middle" height="25">
&nbsp;
</td>
</tr>

<tr>
<td width="150" valign="middle" height="25">
&nbsp;
</td>
</tr>

<tr>
<td width="150" valign="middle" height="25">
&nbsp;
</td>
</tr>

<tr>
<td width="150" valign="middle" height="25">
&nbsp;
</td>
</tr>

</table>

</td>
<td>

<! Untertabelle rechts >

<table border="1" width="150">

<tr>
<td width="150" valign="middle" height="79">
&nbsp;
</td>
</tr>

<tr>
<td width="150" valign="middle" height="79">
&nbsp;
</td>
</tr>

</table>

</td>
</tr>
</table>
</body>

 

[tombe]

Komisch bei mir wird es im IE 8, Opera 11.52 und im FF 8 jeweils korrekt dargestellt! Sowohl dein Code als auch meiner.

 

[Thomasio]

Ich verstehe es ja auch nicht.
Ich habe es probiert mit FF8, IE8 und IE9, unter 32bit XP und 64bit Win7.

Aus irgendeinem Grunde macht der IE bei mir die height um 2px grösser als angegeben, aus height="25" wird eine tatsächliche Höhe von 27px plus Rahmen, FF macht 23px plus Rahmen.

Vielleicht kann man das Ganze anders angehen?
Wie bringt man die Browser dazu für height="25" auch wirklich genau 25px Höhe anzuzeigen, und nicht nur so ungefähr?

 

[tombe]

Mir fällt zwar so nichts passendes ein was es sein könnte, aber hast du vielleicht irgendwo auf der Seite eine CSS Anweisung die dafür verantwortlich sein kann.