Wechsel von "display none" nach "display block" zerstört Tabellen-Layout

[Enrico]

Hallo zusammen,

ich erzeuge über PHP folgende Tabelle:

<table>
   <thead>
      ...
   </thead>
   <tbody id="listeHeute">
      ...
   </tbody>
   <tbody id="listeZukuenftig">
      ...
   </tbody>
   <tbody id="listeVergangen">
      ...
   </tbody>
</table>

Die Tabelle führt einen eventuell heute anfallenden Auftritt von uns auf sowie zukünftige und vergangene Auftritte:

Ich möchte nun mittels JavaScript in Abhängigkeit vom angeklickten Textlink ("Heute", "Zukünftig" und "Vergangen") die jeweils nicht benötigten tbodies ausblenden lassen:

var kategorien = ["heute", "zukuenftig", "vergangen"];

var w,
    x = kategorien.length;

aufrufen (0);

function aufrufen (nr)
{
   w = 0;

   for (; w < x; w++)
   {
      document.getElementById("liste" + kategorien[w][0].toUpperCase() + kategorien[w].substring(1)).style.display = "none"
   }

   document.getElementById("liste" + kategorien[nr][0].toUpperCase() + kategorien[nr].substring(1)).style.display = "block";
}

Das Array "kategorien" wird ebenfalls über PHP erzeugt. Gibt es keinen heutigen Auftritt, so wird "kategorien" keinen Eintrag "heute" enthalten. Sind nur vergangene Auftritte vorhanden, dann wird "kategorien" nur den Eintrag "vergangen" enthalten usw. Deswegen durchlaufe ich das Array auch mit einer Schleife.

Ich verstecke zuerst alle tbodies aus ("display: none") und möchte nur den anzuzeigenden tbody sichtbar machen ("display: block").

Leider wird dabei aber der Tabellenaufbau zerstört:

Was mache ich falsch?

Vielen Dank für eure Hilfe und Gruß Enrico