• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Tabellen untereinander - ein/ausblenden

sun1907

New member
Ich habe eine Frage zu Tabellen untereinander und der Option diese ein/auszublenden.
Alles klappt soweit wunderbar, in allen Browsern klappt es einwandfrei, es treten keine optischen Fehler auf. Außer wenn ich das ganze Spiel auf einem Smartphone laufen lasse.
Folgende Situation. Ich habe ein HTML-Dokument mit insgesamt 10 Tabellen untereinander. Da per Option-Menü jeweils eine andere Möglichkeit geboten werden soll, blende ich die Tabellen je nach Option ein/aus.
Das klappt auch. Jedoch kommt irgendwann der Style durcheinander und plötzlich ist z.B. die zweite Zelle nicht mehr an der Stelle wie vorher.
Hat jemand schon mal sowas gehabt und kann ggf. einen Tip geben ?.

Ich habe die Struktur folgend aufgebaut:

Code:
<html>
<head>
<style type="text/css">table { width:100%; } td { vertical-align:center; overflow:hidden; }</style>
</head>
<body>
<form name="xxxxx">
<tbody>
<table id="xxxxxx" align="left" small style="table-layout:fixed;text-align:left;color:#F2F2F2;">

<tr>
<td colspan="2" style="width:40%" align="left" valign="middle" id="xxxx"><b>Text</b></td>
<td id="xxxxx" align="left"><input class="inpt" style="color:#ffffff;background-color:#0000B2;border-color: #0000B2;" type="text" data-mini="true"  name="xxxx" size="8" maxlength="8" value="" onChange="xxxxxxx" onClick="this.value='';xxxxx"></td>
</tr>

<tr>
<td colspan="2" align="left" valign="middle" id="xxxx"><b>Text</b></td>
<td id="xxxxx" align="left"><input class="inpt" style="color:#ffffff;background-color:#0000B2;border-color: #0000B2;" type="text" data-mini="true"  name="xxxx" size="8" maxlength="8" value="" onChange="xxxxxxx" onClick="this.value='';xxxxx"></td>
</tr>

</table>
</tbody>
</form>
</style>


<form name="xxxxx">
<tbody>
<table id="xxxxxx" align="left" small style="table-layout:fixed;text-align:left;color:#F2F2F2;">

<tr>
<td colspan="2" style="width:40%" align="left" valign="middle" id="xxxx"><b>Text</b></td>
<td id="xxxxx" align="left"><input class="inpt" style="color:#ffffff;background-color:#0000B2;border-color: #0000B2;" type="text" data-mini="true"  name="xxxx" size="8" maxlength="8" value="" onChange="xxxxxxx" onClick="this.value='';xxxxx"></td>
</tr>

<tr>
<td colspan="2" align="left" valign="middle" id="xxxx"><b>Text</b></td>
<td id="xxxxx" align="left"><input class="inpt" style="color:#ffffff;background-color:#0000B2;border-color: #0000B2;" type="text" data-mini="true"  name="xxxx" size="8" maxlength="8" value="" onChange="xxxxxxx" onClick="this.value='';xxxxx"></td>
</tr>

</table>
</tbody>
</form>
</style>


<form name="xxxxx">
<tbody>
<table id="xxxxxx" align="left" small style="table-layout:fixed;text-align:left;color:#F2F2F2;">

<tr>
<td colspan="2" style="width:40%" align="left" valign="middle" id="xxxx"><b>Text</b></td>
<td id="xxxxx" align="left"><input class="inpt" style="color:#ffffff;background-color:#0000B2;border-color: #0000B2;" type="text" data-mini="true"  name="xxxx" size="8" maxlength="8" value="" onChange="xxxxxxx" onClick="this.value='';xxxxx"></td>
</tr>

<tr>
<td colspan="2" align="left" valign="middle" id="xxxx"><b>Text</b></td>
<td id="xxxxx" align="left"><input class="inpt" style="color:#ffffff;background-color:#0000B2;border-color: #0000B2;" type="text" data-mini="true"  name="xxxx" size="8" maxlength="8" value="" onChange="xxxxxxx" onClick="this.value='';xxxxx"></td>
</tr>

</table>
</tbody>
</form>
</style>


usw.... also insgesamt 10 solche Tabellen untereinander. Jedoch kommt es spätestens nach dem Ausblenden der Tabelle1 und Einblenden der Tabelle2 zu einer unschönen Formatierung.

Hat jemand hier einen Tip ?.. Vielen Dank im voraus.
 
Als aller erstes solltest du dein HTML validieren - also z.B. eine DocType verwenden und die <tbody>s innerhalb der <table> platzieren... aber da ist noch mehr kaputt - bemühe einfach einen HTML-Validator.

Wenn das Problem mit validem HTML immer noch existiert, müssen wir nochmal genauer hinschauen.
 
Zurück
Oben