Tabellenzellen versch. Breite

[Thoralf Knuth]

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