Tabellen im Responsive Web Design

Habe ich folgte die typische form eingerichtet wurde, in einer Anwendung, die die Verwendung einer Tabelle, die wie folgt aussieht:

<table>
  <tbody>
    <tr>
      <td>Field</td>
      <td>@Html.TextBox("Field")</td>
    </tr>
    <tr>
      <td>Field 2</td>
      <td>@Html.TextBox("Field2")</td>
    </tr>
  </tbody>
</table>

Erzeugt ein format wie:

Field    <TextBox>
Field    <TextBox>

Meisten mobilen designs lag es auf diese Weise:

Field
<TextBox>
Field
<TextBox>

Das ist etwas, was ich tun müssen, weil einige meiner Formulare sind zu lang für die Anzeige in einem mobilen browser. Gibt es eine einfache Möglichkeit, diese einzurichten? Vielleicht gibt es einen Weg, um jede Zelle zu Rendern auf eine neue Linie, die für mich funktionieren würde? Etwas cross-browser unterstützt?

Oder ist ein Umbau nötig?

Dank.

InformationsquelleAutor Brian Mains | 2012-03-17
  1. 21

    Ja, Sie können etwas tun, wie dies die Tabelle löschen display für kleinere viewports: 

    @media (max-width:40em) {
    table, thead, tbody, tfoot, th, td, tr { display:block; }
    tr + tr { margin-top:1em; }
}

    Finden Sie unter: css-tricks.com/responsive-data-tables/

    InformationsquelleAutor ryanve
  2. 8

    Ich in der Regel nicht form-markup wie eine Liste (die Art hängt von den Bedürfnissen) oder eine Reihe von divs. Grundsätzlich wird jeder Bereich hat ein element enthalten. Für ein einfaches Beispiel verwende ich ein div hier, aber das ist in der Regel das element mit der Letzte Ausweg für mich:

    <div class="input-text form-field">
   <label for="the_element">Text Input</label>
   <input id="the_element" type="text" />
</div>

    Dieser ist wirklich am besten, weil, während das markup ist zumindest ein bisschen mehr semantische und es gibt uns eine Tonne von Möglichkeiten.

    Gestapelten Etiketten:

      .form-field label { display: block; }

    Feste Breite Etiketten:

    .form-field {overflow: hidden; width: 200px;}
.form-field label {width: 40%; margin-left: 10%;}
.form-field label, .form-field input, .form-field select, .form-field textarea {float: left; width: 50%;}

    Dieser mark-up bekommt Ihr auch 2-up-Felder ziemlich leicht

    Markup:

    <fieldset>
  <legend>Name</legend>
  <div class="input-text form-field">
       <label for="first_name">First Name</label>
       <input id="first_name" type="text" />
  </div>
  <div class="input-text form-field">
       <label for="last_name">Last Name</label>
       <input id="last_name" type="text" />
  </div>
</fieldset>

    CSS

    fieldset {overflow: hidden;}
.form-field {overflow: hidden; width: 200px; float:left; margin-left: 20px;}
.form-field label { display: block; }
.form-field input, .form-field select .form-field textarea {display: block; width: 100%;}

    Sie bekommen die Allgemeine Idee. Wenn Sie es tun auf diese Weise, und verwenden Sie realtive Breite, wenn erforderlich, können Sie die form ganz Ansprechend.

    InformationsquelleAutor prodigitalson
  3. 1

    In mobile Geräte - td{ display:block }

    InformationsquelleAutor Praveen Vijayan
  4. 0

    wenn Sie möchten, dass Ihre Website mobilen freundlich, es gibt ein paar Dinge zu vermeiden. Sie können nicht mit Tabellen gemacht, weil Sie mit einer festen Breite, so wird es nicht richtig angezeigt werden in kleinere, mobile.Auch die relative position in der css.Wenn Sie wollen ein anderes layout verwenden Sie den @media-query. Oder verwenden Sie jquerymobile design interactive design.

    InformationsquelleAutor Venkat Selvan
  5. -2

    Halten über eine Tabelle. Es ist der einzige Ansatz, mit dem Sie haben die form angezeigt, die in einer adaptiven Weise, so dass die Etiketten nehmen Sie einfach die Breite, die der längste von Ihnen verlangt. Automatisch eine Tabelle gerendert wird vernünftig, und Sie können leicht die Feinabstimmung es.

    Es auch OK funktioniert auf mobilen Geräten, vorausgesetzt, dass die Etiketten kurz, als Sie sein sollten. Mobile-device-displays sind nicht , dass schmal, dass Sie nicht aufnehmen konnte, ein label, wie "Stadt" und-15-Zeichen-wide-input-box. Wenn Probleme entstehen in einigen Fällen können Benutzer mit Ihnen umgehen, als Sie treten ähnliche Probleme überall; Sie können, zum Beispiel, drehen Sie das Gerät um 90 Grad.

    InformationsquelleAutor Jukka K. Korpela
Schreibe einen Kommentar