Tables en Responsive Web Design

J'ai suivi la manière typique, un formulaire a été mis en place dans une application, qui consiste à utiliser une table qui ressemble à ceci:

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

Qui produit un format comme:

Field    <TextBox>
Field    <TextBox>

La plupart des contenus mobiles étalez-le de cette façon:

Field
<TextBox>
Field
<TextBox>

Qui est quelque chose que je dois faire parce que certains de mes formes sont trop long pour s'afficher dans un navigateur mobile. Est-il un moyen facile à mettre en place cela? Peut-être il ya un moyen de rendre chaque cellule de rendu sur une nouvelle ligne, ce qui pourrait fonctionner pour moi? Quelque chose de croix-navigateur pris en charge?

Ou est une refonte nécessaire?

Grâce.

OriginalL'auteur Brian Mains | 2012-03-17

21

Oui vous pouvez faire quelque chose comme cette chute de l'affichage de la table pour les petites fenêtres:
```
@media (max-width:40em) {
    table, thead, tbody, tfoot, th, td, tr { display:block; }
    tr + tr { margin-top:1em; }
}
```
Voir: css-tricks.com/responsive-data-tables/

OriginalL'auteur ryanve

J'ai l'habitude de faire le formulaire de balisage comme une liste (le type dépend des besoins) ou une série de divs. Fondamentalement, chaque champ a un élément contenant. Pour un simple exemple, je vais utiliser un div ici, mais c'est généralement l'élément contenant de dernier recours pour moi:

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

C'est vraiment le meilleur, car tandis que le balisage est au moins un peu plus de la sémantique et il nous donne une tonne de possibilités.

Empilées les étiquettes:

  .form-field label { display: block; }

Fixe la largeur des étiquettes:

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

Cette marque jusqu'vous reçoit aussi 2-place des champs assez facilement

Balisage:

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

Vous avez l'idée générale. Si vous faites de cette façon et l'utilisation realtive largeurs si nécessaire, vous pouvez faire la forme totalement responsive.

OriginalL'auteur prodigitalson

1

Dans les appareils mobiles - td{ display:block }

OriginalL'auteur Praveen Vijayan
0

si vous voulez que votre site mobile convivial il y a quelques choses à éviter. Vous ne pouvez pas utiliser les tables parce qu'ils ont fait avec une largeur fixe afin de ne pas s'afficher correctement dans les petites mobile.Également utiliser la position relative dans le css.Si vous voulez faire une présentation différente, utiliser @media query. Ou utiliser jquerymobile pour la conception du design interactif.

OriginalL'auteur Venkat Selvan
-2

Gardez à l'aide d'un tableau. C'est la seule méthode qui vous permet d'avoir la forme affichée dans une façon souple de sorte que les étiquettes de prendre juste la largeur, la plus longue d'entre eux exige. Une table est automatiquement rendu raisonnablement, et vous pouvez facilement affiner.

Il fonctionne aussi bien sur les appareils mobiles, à condition que les étiquettes sont courtes, comme ils devraient l'être. Appareil Mobile affiche ne sont pas que étroit qu'ils ne pouvaient pas accueillir une étiquette comme “Ville” et de 15 caractères large zone de saisie. Lorsque des problèmes surviennent dans certains cas, les utilisateurs peuvent traiter avec eux, car ils rencontrent des problèmes similaires, tout autour; ils peuvent, par exemple, tourner le dispositif de 90 degrés.

OriginalL'auteur Jukka K. Korpela

Vous devez vous connecter pour publier un commentaire.