Thoralf Knuth: Tabellenzellen versch. Breite

Hallo Forumlinge,

die Selfraumlinge[1] sind ja denn doch naturgeschützt.

Ich will mal wieder auf Euer Wissen und Eure Erfahrung zurückgreifen. Ich sitze immer noch an meiner offiziellen Homepage, die in der Hauptsache als Bündelung von Bewerbungsunterlagen dienen soll. Ein Problem, was doch eigentlich simpel sein sollte, widersetzt sich mir hartnäckig.

<table cellspacing="0" cellpadding="0" id="index">
  <tr style="height: 30px;">
    <th class="lang-tab">
      <img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" />
      Deutsch
    </th>
    <th class="lang-tab-en">
      <img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" />
      <img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" />
      English
    </th>
    <th class="lang-tab">
      <img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" />
      Français
    </th>
    <th class="lang-tab">
      <img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" />
      &#x041F;&#x043E;-&#x0420;&#x0443;&#x0441;&#x0441;&#x043A;&#x0439;
    </th>
    <th class="lang-tab-empty">
      Diese Zelle bleibt leer, Text nur zum Testen
    </th>
  </tr>
  <tr style="height: auto;">
    <td colspan="5" style="width: 100%; min-width: 100%; max-width: 100%; height: auto;">
      Hier dann der eigentliche Inhalt, für meine Frage unerheblich.
    </td>
  </tr>
</table>

Dazu folgendes CSS:

TABLE#index {
 width: 66%; min-width: 66%; max-width: 66%;
 height: 66%; min-height: 66%; max-height: 66%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 10%;
 margin-bottom: auto;
 color: #000;
 background: #EEE none no-repeat center;
 padding: 0px;
 table-layout: fixed;
 empty-cells: show;
 border-collapse: collapse;
 border-spacing: 0px;
}

th.lang-tab {
 width: auto; min-width: 25px; /* max-width: 15%; */
}
th.lang-tab-en {
 width: auto; min-width: 50px; /* max-width: 15%; */
}
th.lang-tab-empty {
 width: auto; min-width: none; max-width: none;
}
img.flag {
 width: 18px;
 height: 12px;
 margin: 0px;
 padding: 0px;
 padding-right: 1px;
 border: none;
}

Das ganze sollen Tabs auf der ersten Seite sein, deren dynamisches Aussehen ich mittels CSS realisieren will. Nun sind die aber immer gleich breit, und zwar auch der rechte 'Rest', und ich bin in der Tat nicht in der Lage, meinen Fehler zu finden. Zur Veranschaulichung:

IST:
<img src="http://upload.thknuth.de/selfraum/tabellenkopf_ist.png" border="0" alt="">
SOLL:
<img src="http://upload.thknuth.de/selfraum/tabellenkopf_soll.png" border="0" alt="">

Gruss, Thoralf

--
Sic Luceat Lux!
[1] </archiv/2003/4/44271/#m241457> und </archiv/2003/4/43246/#m236418>
  1. hi,

    IST:
    <img src="http://upload.thknuth.de/selfraum/tabellenkopf_ist.png" border="0" alt="">
    SOLL:
    <img src="http://upload.thknuth.de/selfraum/tabellenkopf_soll.png" border="0" alt="">

    • abstände links/rechts
      warum gibst du den spalten 1-4 nicht einfach eine feste breite?
      spalte 5 bleibt variabel.

    • abstände oben/unten
      lass die höhenangabe in der 1. zeile weg (30px),
      damit passt sich die zeilenhöhe automatisch der höhe des inhaltes an, also so wie bei SOLL

    mfg NAG

    1. Hallo nag,

      besten Dank für die Tipps, auch wenn die leider nicht helfen.

      • abstände links/rechts
        warum gibst du den spalten 1-4 nicht einfach eine feste breite?
        spalte 5 bleibt variabel.

      Wird nix, weil ich HTML gerade benutze, um ein variables Layout zu haben. Die Seite muss also auf 640x480 in der deutschen Amtsstube genauso brauchbar sein wie auf 1280x1024 oder 1900x1600 bei mir am System und in besser ausgestatteten Kanzleien.

      • abstände oben/unten
        lass die höhenangabe in der 1. zeile weg (30px),
        damit passt sich die zeilenhöhe automatisch der höhe des inhaltes an, also so wie bei SOLL

      Die Höhe war zunächst keine Priorität bei mir, aber auch ohne die Angabe stimmt das Mass nicht genau, soweit ich mich entsinne.

      Gruss, Thoralf

      --
      Sic Luceat Lux!
      1. hi

        Wird nix, weil ich HTML gerade benutze, um ein variables Layout zu haben. Die Seite muss also auf 640x480 in der deutschen Amtsstube genauso brauchbar sein wie auf 1280x1024 oder 1900x1600 bei mir am System und in besser ausgestatteten Kanzleien.

        ? da komm ich nicht ganz mit.
        die spalten 1-4 sind doch überall gleich breit? oder passt sich bei
        dir auch die schriftgrösse automatisch an?

        das problem ist doch - du gibst deiner tabelle eine breite 66%.
        da du den spalten aber keine definierte breite zuweist, wird die
        vorhandene breite gleichmässig auf alle spalten aufgeteilt.

        • so kommst du also nicht weiter.
        • du kannst den spalten auch eine prozentangabe zuweisen, um diese
          dynamisch zu gestalten

        nag

        1. N'Abend,

          die spalten 1-4 sind doch überall gleich breit? oder passt sich bei
          dir auch die schriftgrösse automatisch an?

          Und genau da is der Knackpunkt, an dem ich hänge. ;)
          Schriftgrösse passt sicht nicht an.

          Ich will

          • Die Tabelle auf 66%, um sie in der Seite zentrieren zu können. Reiner Designwunsch.
          • Die 4 Zellen, die als Tabs für die Navigation dienen, sollen die für den Inhalt erforderliche Breite haben. Die letzte Zelle soll dann die Restbreite belegen.

          wird die vorhandene breite gleichmässig auf alle spalten aufgeteilt.

          Genau dieses gleichmässige Aufteilen will ich eben nicht.

          Gruss, Thoralf

          --
          Sic Luceat Lux!
          1. kurze rede langer sinn - oder anders rum :)

            http://www.stud.uni-giessen.de/~su6690/test/test0.html

            (spalte 4 ist hier auf 100px gesetzt)

            mfg NAG

            1. Also wenn ich dich richtig verstehe, dann setz doch einfach die letzte Spalte auf 100%
              dann haben die andern Spalten nur die benötigte Breite und die letzte den gesamten letzten teil.
              Wenn das nicht geht, dann mach in die letzte Spalte noch eine Tabelle und gib der 100% breite

              1. Hallo KrampfDackel,

                Also wenn ich dich richtig verstehe, dann setz doch einfach die letzte Spalte auf 100%

                Oh Mann, ich glaube, das isses. Falls nicht jemand von den strict-Kenneren hier Einwände dagegen hat, dann ist das die Lösung. Es klappt so, ich werd in der Spec nochmal schauen, ob das 'zulässig' ist, aber es schaut in der Tat gut aus! Herzlichen Dank.

                dann haben die andern Spalten nur die benötigte Breite und die letzte den gesamten letzten teil.

                Was genau das Ziel ist.

                Wenn das nicht geht, dann mach in die letzte Spalte noch eine Tabelle und gib der 100% breite

                Mal sehen, Mozilla macht's auch so, die anderen Kandidaten schau ich mir morgen noch an.

                Gruss, Thoralf

                --
                Sic Luceat Lux!
                1. JOJO nix zu danken
                  Prozente sind immer lustig :D

                  CU Dackel

              2. hi,

                einfach und richtig :)
                naja ...es ist spät.
                aber dein posting sollte an knuth gehen oder?

                NAG

                1. Hi,

                  naja ...es ist spät.

                  Muss Dich nicht stören, ich hoble schon den ganzen Tag an diesem Brett vor meiner Stirn. ;)

                  aber dein posting sollte an knuth gehen oder?

                  Für's Protokoll, Knuth ist der Nachname. ;)

                  Gruss, Thoralf

                  --
                  Sic Luceat Lux!
              3. Hallo allerseits,

                schade, funktioniert doch nicht richtig, Opera und Mozilla machen es, wie es sein soll. Die Seite validiert als korrektes HTML401Trans, das CSS validiert als CSS2. Dennoch spuckt der IE folgendes aus:

                <img src="http://upload.thknuth.de/selfraum/tabellenkopf_ie.png" border="0" alt="">

                Hier nochmal HTML & CSS, wie es jetzt im Augenblick aussieht:
                <table cellspacing="0" cellpadding="0" id="index">
                  <tr style="height: 30px;">
                    <th class="lang-tab">
                      <img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" />
                      Deutsch
                    </th>
                    <th class="lang-tab-en">
                      <img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" />
                      <img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" />
                      English
                    </th>
                    <th class="lang-tab">
                      <img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" />
                      Français
                    </th>
                    <th class="lang-tab">
                      <img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" />
                      &#x041F;&#x043E;-&#x0420;&#x0443;&#x0441;&#x0441;&#x043A;&#x0439;
                    </th>
                    <th class="lang-tab-empty">   </th>
                  </tr><tr style="height: auto;">
                    <td colspan="5" style="width: 100%; min-width: 100%; max-width: 100%; height: auto;">   abc </td>
                  </tr>
                </table>

                TABLE#index {
                 width: 66%; min-width: 66%; max-width: 66%;
                 height: 66%; min-height: 66%; max-height: 66%;
                 margin-left: auto;
                 margin-right: auto;
                 margin-top: 10%;
                 margin-bottom: auto;
                 color: #000;
                 background: #EEE none no-repeat center;
                 padding: 0px;
                 table-layout: fixed;
                 empty-cells: show;
                 border-collapse: collapse;
                 border-spacing: 0px;

                border: dotted;
                }
                th {
                 border-style: dotted;
                 border-color: Black;
                }
                th.lang-tab {
                 width: auto; min-width: 25px; /* max-width: 15%; */
                 border-style: dotted;
                 border-color: Black;
                }
                th.lang-tab-en {
                 width: auto; min-width: 50px; /* max-width: 15%; */
                 border-style: dotted;
                 border-color: Black;
                 color: Black;
                 background-color: Blue;
                }
                th.lang-tab-empty {
                 width: 100%; /* min-width: none; max-width: none; */
                 border-style: dotted;
                 border-color: Black;
                }
                img.flag {
                 width: 18px;
                 height: 12px;
                 margin: 0px;
                 padding: 0px 1px 0px 0px;
                 /* padding-right: 1px; */
                 border: none;
                }

                Gruss, Thoralf

                --
                Sic Luceat Lux!
                1. Hallo Thoralf,

                  schade, funktioniert doch nicht richtig, Opera und Mozilla machen es, wie es sein soll. Die Seite validiert als korrektes HTML401Trans, das CSS validiert als CSS2. Dennoch spuckt der IE folgendes aus:

                  Ich finde das Verhalten nur logisch, schließlich weist du einer Zelle die komplette Breite zu, sodass für die anderen nichts übrig bleibt und sie zusammengequetscht werden. Daran dachte ich schon heute morgen, als ich deine vorläufige Lösung las.

                  Wieso löst du es noch komplett anders, ohne einzelne Tabellenzellen? Dir geht es doch lediglich um den optischen Effekt, also den Strich rechts neben dem Link. Und den kannst du auch mit CSS erreichen. Zwei Beispiele, das eine mit span, das andere mit einer Liste für die Links (bessere Auszeichnung):

                  #index {width:66%; margin-left:auto; margin-right:auto; margin-top:10%; color:#000; background-color:#eee; table-layout:fixed; empty-cells:show; border-collapse:collapse; border-spacing:0; border:1px solid black;}

                  td {border:1px solid black; padding:5px;}
                  #langnav {padding:0;}
                  #langnav span {display:block; float:left; border-right:1px solid black; padding:4px 10px;}

                  #langnav2 {padding:0;}
                  #langnav2 ul {margin:0; padding:0; list-style-type:none;}
                  #langnav2 li {display:block; float:left; border-right:1px solid black; margin:0; padding:4px 10px;}

                  <table cellspacing="0" cellpadding="0" id="index">
                  <tr>
                  <td id="langnav">

                  <span><img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" /> Deutsch</span>
                  <span><img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" /><img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" /> English</span>
                  <span><img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" /> Français</span>
                  <span><img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" /> &#x041F;&#x043E;-&#x0420;&#x0443;&#x0441;&#x0441;&#x043A;&#x0439;</span>

                  </td>
                  </tr>
                  <tr>
                  <td>Hier dann der eigentliche Inhalt, für meine Frage unerheblich.</td>
                  </tr>
                  <tr>
                  <td id="langnav2">

                  <ul>
                  <li><img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" /> Deutsch</li>
                  <li><img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" /><img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" /> English</li>
                  <li><img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" /> Français</li>
                  <li><img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" /> &#x041F;&#x043E;-&#x0420;&#x0443;&#x0441;&#x0441;&#x043A;&#x0439;</li>
                  </ul>

                  </td>
                  </tr>
                  <tr>
                  <td>Hier dann der eigentliche Inhalt, für meine Frage unerheblich.</td>
                  </tr>
                  </table>

                  Auf neueren Browsern sollte das funktionieren, ich konnte es mit dem MSIE nur in Version 6 testen.

                  Ferner solltest du nicht das th-Element benutzen, wenn es sich nicht wirklich um eine Spalten- bzw. Zeilenüberschrift handelt. Deine Tabelle ist eine reine Layouttabelle, da ist die Verwendung von th, thead, scope/headers/abbr etc. unsinnig und führt nur zur Verwirrungen in manchen Browsern.

                  Grüße,
                  Mathias

                  --
                  »In anderen Newsgroups werden Pseudonyme akzeptiert, es handelt sich dabei meist um Gruppen, in denen sensible Themen (z.B. psychische oder peinliche Erkrankungen o.ä.) behandelt werden.«
                  1. Hallo Mathias,

                    die Antwort sollte gestern hier schon stehen, ist aber irgendwo im Datennirwana verschwunden, ich hoffe, ich kriege es noch zusammen.

                    Ich finde das Verhalten nur logisch, schließlich weist du einer Zelle die komplette Breite zu, sodass für die anderen nichts übrig bleibt und sie zusammengequetscht werden. Daran dachte ich schon heute morgen, als ich deine vorläufige Lösung las.

                    Deswegen hatte ich diese Lösung hier schon recht zeitig aussortiert in einem früheren Versuch, da die aber jetzt hier im Opera und Mozilla so funktioniert hatte, und ich dem Mozilla mehr vertraue, als dem IE, schien es doch eine gute Lösung zu sein.

                    Wieso löst du es noch komplett anders, ohne einzelne Tabellenzellen? Dir geht es doch lediglich um den optischen Effekt, also den Strich rechts neben dem Link.

                    Ziel ist ein Reiter, der möglichst in allen Browser funktioniert, wie eben Netscape4 - IE6. Nur diese eine Startseite muss so umfänglich funktionieren, alle Folgeseiten haben eine klardefinierte Zielgruppe, aber eben diese Startseite nicht und die muss als Aushängeschild perfekt werden. ;)

                    Auf neueren Browsern sollte das funktionieren, ich konnte es mit dem MSIE nur in Version 6 testen.

                    Ich probier das auf jeden Fall aus, auf Arbeit habe ich noch einen IE55 und werd mal in der Bibliothek schauen, wie das in einem Netscape 3.1 Gold aussieht. Schlimmstenfalls muss ich eben doch mit einer Browserweiche arbeiten.

                    Ferner solltest du nicht das th-Element benutzen, wenn es sich nicht wirklich um eine Spalten- bzw. Zeilenüberschrift handelt. Deine Tabelle ist eine reine Layouttabelle, da ist die Verwendung von th, thead, scope/headers/abbr etc. unsinnig und führt nur zur Verwirrungen in manchen Browsern.

                    Stimmt völlig, ist das Überbleibsel diverse Versuche, die Browser doch noch auszutricksen.

                    Gruss, Thoralf

                    --
                    Sic Luceat Lux!
                    1. Hallo Thoralf,

                      Ziel ist ein Reiter, der möglichst in allen Browser funktioniert, wie eben Netscape4 - IE6. Nur diese eine Startseite muss so umfänglich funktionieren, alle Folgeseiten haben eine klardefinierte Zielgruppe, aber eben diese Startseite nicht und die muss als Aushängeschild perfekt werden. ;)

                      Da Du ja sowieso schon Tabellen verwendest: <ketzerei>verschachtele welche</ketzerei>.

                      Viele Grüße,
                      Christian

                      1. Hallo Christian,

                        Da Du ja sowieso schon Tabellen verwendest: <ketzerei>verschachtele welche</ketzerei>.

                        Hm, auch eine Idee. Werd ich mir mal anschauen, *schreit nach mehr Zeit*

                        Ich hatte in der Tat gehofft, dass vor mir schonmal jemand auf dieses Problem gestossen war und eine Patentlösung gefunden hatte. ;)

                        Gruss, Thoralf

                        --
                        Sic Luceat Lux!
            2. Hi nag,

              http://www.stud.uni-giessen.de/~su6690/test/test0.html

              Besten Dank, das ist die Notlösung, die ich hier auch schon habe, nur will ich eben (inzwischen jetzt gerade ;)) eben wissen, wie ich diese Aufteilungsaufgabe dem Browser überlasse. Zur Not geht das so, im schlimmsten Fall müsste ich die Tabelle noch weiter zerlegen, mit ein bisschen colspan-Spielen krieg ich wohl dann auch, was ich will. Aber es muss doch ohne diese Verrenkungen gehen. ;)

              Gruss, Thoralf

              --
              Sic Luceat Lux!
              1. hi,>> Hi nag,

                http://www.stud.uni-giessen.de/~su6690/test/test0.html
                Besten Dank, das ist die Notlösung, die ich hier auch schon habe, nur will ich eben (inzwischen jetzt gerade ;)) eben wissen, wie ich diese Aufteilungsaufgabe dem Browser überlasse. Zur Not geht das so, im schlimmsten Fall müsste ich die Tabelle noch weiter zerlegen, mit ein bisschen colspan-Spielen krieg ich wohl dann auch, was ich will. Aber es muss doch ohne diese Verrenkungen gehen. ;)

                kampfdackel hat die lösung:

                tabelle - width 66prozent
                spalten 1-4 bekommen keine breite zugewiesen
                nur doe 5. spalte wird mit 100% definiert.

                nag