Tabelle in un Responsive Web Design

Ho seguito il modo tipico di un modulo, il programma di installazione in un’applicazione, che è quello di utilizzare una tabella simile a questa:

<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>

Che produce un formato come:

Field    <TextBox>
Field    <TextBox>

Più mobile disegni di lay-out in questo modo:

Field
<TextBox>
Field
<TextBox>

Che è qualcosa che devo fare, perché alcune delle mie forme sono troppo lungo per essere visualizzato in un browser mobile. C’è un modo semplice per impostare questo? Forse c’è un modo per rendere ogni cella di rendering su una nuova linea, che avrebbe funzionato per me? Qualcosa cross-browser supportati?

O è un restyling necessario?

Grazie.

 

5 Replies
  1. 8

    Faccio di solito forma di markup come una lista (che tipo di dipende dalle esigenze) o una serie di div. Fondamentalmente ogni campo ha un elemento contenitore. Per un semplice esempio io uso un div qui, ma questo è di solito l’elemento contenitore di ultima istanza per me:

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

    Questa è davvero la migliore, perché mentre il markup è almeno un po ‘ di più semantico e ci dà un sacco di possibilità.

    Le etichette in pila:

      .form-field label { display: block; }

    Larghezza fissa etichette:

    .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%;}

    Questo marchio fino anche si ottiene 2 campi abbastanza facilmente

    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%;}

    Si ottiene l’idea generale. Se lo fai in questo modo e l’uso e ‘ presente nelle relative larghezze, quando necessario, è possibile rendere il modulo completamente reattivo.

  2. 0

    se volete che il vostro sito mobile friendly ci sono alcune cose da evitare. Non è possibile utilizzare le tabelle, perché hanno fatto con una larghezza fissa in modo da non visualizzare correttamente in mobili più piccoli.Utilizzare anche la posizione relativa dei css.Se si vuole fare il layout differenti li uso @media query. O utilizzare jquerymobile per la progettazione di design interattivo.

  3. -2

    Mantenere l’utilizzo di una tabella. È l’unico metodo che ti permette di avere il modulo visualizzato in modo adeguato in modo che le etichette prendere solo la larghezza che la più lunga di loro richiede. Una tabella viene automaticamente reso ragionevolmente, e si può facilmente mettere a punto.

    Inoltre, funziona bene su dispositivi mobili, a condizione che le etichette sono brevi, come dovrebbero essere. Dispositivo Mobile schermi non sono che stretto che non poteva non ospitare una etichetta come la “Città” e di 15 caratteri casella di input. In caso di problemi, in alcuni casi, gli utenti possono trattare con loro, affrontano problemi simili in tutto, si può, per esempio, ruotare il dispositivo di 90 gradi.

Lascia un commento