Tabellen-Layout - Hilfe :(

[HTML_Gum]

Hallo zusammen,

ich stehe aktuell vor einer Aufgabe, welche mich zwangsläufig mit HTML und CSS in Berührung bringt. Ich versuche mittels SAP mobile ANwendungen zu generieren, das bedeutet, dass SAP im Hintergrund HTML-Code generiert zu bestehenden Anwendungen um diese webfähig zu machen. Das hier natürlich nicht das "perfekte Coding" herauskommt habe ich bereits erwartet und so muss ich nun irgendwie Lösungen finden, um die Formatierung auf Aufbereitung mittels HTML und CSS entsprechend aufzubereiten.

Ich möchte die Anwendung auf einen Screen von 240x320px optimieren, da die mobilen Geräte genau diese Auflösung besitzen. Nun verwendet SAP hierfür Tabellen, um die Positionierung zu ermöglichen und arbeitet dabei aktiv mit dem Attribut colspan, um innerhalb der Tabelle zu positionieren. Nun hatte ich zunächst geplant hier mit prozentualen width-Angaben in der Tabellen es so hinzubekommen, dass sich die Tabelle dynamisch an die Screen-Größe anpasst, dies funktioniert in gewisser Weise auch, allerdings nur dann, wenn nicht zuviele Elemente in einer Tabellen-Zeile vorhanden sind. Wenn letzteres der Fall ist, dann kommt auf dem Screen dennoch ein Scrollbalken, damit alles dargestellt werden kann. Dies möchte ich unter allen Umständen verhindern.

Deswegen die Frage: Gibt es eine Möglichkeit eine Tabelle wirklich absolut fix auf die Screen-Größe auszurichten?! Ich habe es auch bereits mit Pixel-Angaben versucht, aber auch da erweitert er die Breite bei Bedarf automatisch und es kommt erneut zu Scrollbalken.

Bin wirklich für jeden Tipp dankbar!!

Viele Grüße & Danke!
Markus

 

[HTML_Gum]

Hier der Ausschnitt zum Tabellen-Aufbau, welcher generiert wurde.
Im CSS habe ich für MobileScreen jeweils eine width von 100% eingestellt.

<!-- The complete screen -->             <table  class="MobileScreen" cellpadding="0" cellspacing="0" border="0">                  <!-- the cua area with title, message and logo -->                  <tr>                     <td width="100%">                      </td>                 </tr>                  <!-- the user area -->                 <tr  style="height:100%;">                     <td>                          <table class="MobileUserArea" cellpadding="0" cellspacing="0"  border="0" style="width:27.0em">                            <thead><tr style="height:-1px"><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td style="width:0.82em"/><td  style="width:0.82em"/><td  style="width:0.82em"/></tr></thead>                              <!-- line 1 -->                             <tr  class="MobileRow">                                 <td  colspan="16" rowspan="1">                                      <span class="MobileLabel">Material</span>                                  </td>                                  <td  colspan="14" rowspan="1">                                      <input type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-matnr[1]');" onblur="javascript:leaveFocusField('gs_mara-matnr[1]');"  id="gs_mara-matnr[1]" name="gs_mara-matnr[1]" value="" size="13"  maxlength="18" />                                  </td>                               </tr>                             <!--  line 2 -->                             <tr class="MobileRow">                                  <td colspan="30"/>                              </tr>                             <!-- line 3 -->                              <tr class="MobileRow">                                  <td colspan="16" rowspan="1">                                      <span  class="MobileLabel">Erstellt&nbsp;am</span>                                  </td>                                  <td  colspan="11" rowspan="1">                                      <input type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-ersda[1]');" onblur="javascript:leaveFocusField('gs_mara-ersda[1]');"  id="gs_mara-ersda[1]" name="gs_mara-ersda[1]" value="" size="10"  maxlength="10" />                                  </td>                                  <td colspan="3"/>                              </tr>                             <!-- line 4 -->                              <tr class="MobileRow">                                  <td colspan="16" rowspan="1">                                      <span  class="MobileLabel">Angelegt&nbsp;von</span>                                  </td>                                  <td  colspan="13" rowspan="1">                                      <input type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-ernam[1]');" onblur="javascript:leaveFocusField('gs_mara-ernam[1]');"  id="gs_mara-ernam[1]" name="gs_mara-ernam[1]" value="" size="12"  maxlength="12" />                                  </td>                                  <td colspan="1"/>                              </tr>                             <!-- line 5 -->                              <tr class="MobileRow">                                  <td colspan="16" rowspan="1">                                      <span class="MobileLabel">Materialart</span>                                  </td>                                   <td colspan="5" rowspan="1">                                      <input type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-mtart[1]');" onblur="javascript:leaveFocusField('gs_mara-mtart[1]');"  id="gs_mara-mtart[1]" name="gs_mara-mtart[1]" value="" size="4"  maxlength="4" />                                  </td>                                  <td colspan="9"/>                              </tr>                             <!-- line 6 -->                              <tr class="MobileRow">                                  <td colspan="16" rowspan="1">                                      <span class="MobileLabel">Warengruppe</span>                                  </td>                                   <td colspan="10" rowspan="1">                                      <input type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-matkl[1]');" onblur="javascript:leaveFocusField('gs_mara-matkl[1]');"  id="gs_mara-matkl[1]" name="gs_mara-matkl[1]" value="" size="9"  maxlength="9" />                                  </td>                                  <td colspan="4"/>                              </tr>                             <!-- line 7 -->                              <tr class="MobileRow">                                  <td colspan="30"/>                              </tr>                             <!-- line 8 -->                              <tr class="MobileRow">                                  <td colspan="7" rowspan="1">                                      <span class="MobileLabel">Menge:</span>                                  </td>                                 <td  colspan="5"/>                                 <td colspan="4"  rowspan="1">                                     <span  class="MobileLabel">BME</span>                                  </td>                                  <td colspan="4"  rowspan="1">                                     <input  type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-meins[1]');" onblur="javascript:leaveFocusField('gs_mara-meins[1]');"  id="gs_mara-meins[1]" name="gs_mara-meins[1]" value="" size="3"  maxlength="3" />                                  </td>                                   <td colspan="6" rowspan="1">                                      <span  class="MobileLabel">BSTME</span>                                  </td>                                  <td colspan="4"  rowspan="1">                                     <input  type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-bstme[1]');" onblur="javascript:leaveFocusField('gs_mara-bstme[1]');"  id="gs_mara-bstme[1]" name="gs_mara-bstme[1]" value="" size="3"  maxlength="3" />                                  </td>                               </tr>                             <!--  line 9 -->                             <tr class="MobileRow">                                  <td colspan="30"/>                              </tr>                             <!-- line 10  -->                             <tr class="MobileRow">                                  <td colspan="30"/>                              </tr>                             <!-- line 11 -->                              <tr class="MobileRow">                                  <td colspan="30"/>                              </tr>                             <!-- line 12 -->                              <tr class="MobileRow">                                  <td colspan="16" rowspan="1">                                      <span class="MobileLabel">Gewichtseinheit</span>                                  </td>                                   <td colspan="4" rowspan="1">                                      <input type="text" class="MobileEdit" onfocus="javascript:setFocusField('gs_mara-gewei[1]');" onblur="javascript:leaveFocusField('gs_mara-gewei[1]');"  id="gs_mara-gewei[1]" name="gs_mara-gewei[1]" value="" size="3"  maxlength="3" />                                  </td>                                  <td colspan="10"/>                              </tr>                             <!-- line 13 -->                              <tr class="MobileRow">                                  <td colspan="30"/>                              </tr>                             <!-- line 14 -->                              <tr class="MobileRow">                                  <td colspan="21"/>                                 <td  colspan="10" rowspan="1">                                      <input type="button" class="MobileButton" id="but_f6[1]"  name="but_f6[1]" value="F6-Delete" onclick="javascript:setOkCode('=F6');"   />                                 </td>                              </tr>                             <!-- line 15 -->                              <tr class="MobileRow">                                  <td colspan="11" rowspan="1">                                      <input type="button" class="MobileButton" id="but_f5[1]"  name="but_f5[1]" value="F5-Refresh" onclick="javascript:setOkCode('=F5');"   />                                 </td>                                  <td colspan="19"/>                              </tr>                         </table>                      </td>                 </tr>             </table>