Tablas en un diseño web adaptable

Question

que he seguido el camino típico de una forma ha sido configurado en una aplicación, que consiste en utilizar una tabla que tiene este aspecto:

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

que produce un formato como:

Field <TextBox> 
Field <TextBox> 

mayoría de los diseños móviles sentar a cabo de esta manera:

Field 
<TextBox> 
Field 
<TextBox> 

que es algo que tengo que hacer porque algunos de mis los formularios son demasiado largos para mostrarlos en un navegador móvil. ¿Hay alguna manera fácil de configurar esto? Tal vez hay una manera de hacer que cada celda rinda en una nueva línea, lo que funcionaría para mí. ¿Algo soportado por varios navegadores?

¿O es necesario un rediseño?

Gracias.

Answer 1

Sí se puede hacer algo como esto gota la presentación de las tablas de ventanas más pequeñas:

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

Ver: css-tricks.com/responsive-data-tables/

Answer 2

En los dispositivos móviles - td {display: block}

Answer 3

si desea que su sitio móvil amigable, hay algunas cosas que debe evitar. No puede usar tablas porque están hechas con un ancho fijo, por lo que no se mostrarán correctamente en un dispositivo móvil más pequeño. También use la posición relativa en css. Si desea hacer un diseño diferente, utilice la consulta @media. O use jquerymobile para diseñar diseño interactivo.

Answer 4

Normalmente escribo el marcado como una lista (que tipo depende de las necesidades) o una serie de divs. Básicamente, cada campo tiene un elemento contenedor. Para un ejemplo simple Voy a usar un div aquí, pero eso es por lo general el elemento que contiene de último recurso para mí:

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

Esto es realmente mejor, porque mientras que el margen de beneficio es al menos un poco más semántica y nos da una toneladas de posibilidades

etiquetas apiladas:

.form-field label { display: block; } 

fijos etiquetas ancho:

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

Esta marca también se te recibe 2-up campos con bastante facilidad

de marcado:

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

Tienes la idea general. Si lo haces de esta manera y utilizas anchuras reales cuando sea necesario, puedes hacer que la forma sea totalmente receptiva.

Answer 5

Sigue usando una tabla. Es el único enfoque que le permite exhibir el formulario de una manera adaptable para que las etiquetas tomen el ancho que requieren las más largas. Una tabla se procesa de manera automática y se puede ajustar fácilmente.

También funciona bien en dispositivos móviles, siempre que las etiquetas sean cortas, como deberían ser. Las pantallas de dispositivos móviles no son que se estrechan porque no pueden acomodar una etiqueta como "Ciudad" y un cuadro de entrada de 15 caracteres de ancho.Cuando surgen problemas en algunos casos, los usuarios pueden tratar con ellos, ya que se encuentran con problemas similares en todo; que pueden, por ejemplo, gire el dispositivo de 90 grados.