Ergebnis 1 bis 2 von 2
  1. #1
    sun1907 ist offline Grünschnabel
    registriert
    23-06-2013
    Beiträge
    7

    Tabellen untereinander - ein/ausblenden

    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.

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: Tabellen untereinander - ein/ausblenden

    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.

Ähnliche Themen

  1. Tabellen Zeilen ein- und ausblenden
    Von flodi1 im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 13-12-2012, 00:38
  2. Divs in Container-Div untereinander anordnen
    Von hejira im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 16-01-2008, 21:41
  3. Tabellen ein- und ausblenden
    Von Pseudomonas im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 06-12-2004, 19:51
  4. [WLAN] Routerclienten untereinander vernetzten
    Von schwerminator im Forum Windows
    Antworten: 12
    Letzter Beitrag: 22-09-2004, 10:30
  5. übergabe von werten in formularen untereinander
    Von PRINZ im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 04-10-2001, 00:39

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •