Таблицы в Отзывчивый веб-дизайн

Question

Я следовал типичный способ, как форма была установка в приложении, которое должно использовать таблицу, которая выглядит следующим образом:

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

Который производит формат, как:

Field <TextBox> 
Field <TextBox> 

Большинство мобильных конструкций заложить его таким образом:

Field 
<TextBox> 
Field 
<TextBox> 

Что-то мне нужно сделать, потому что некоторые из моих Формы слишком длинны для отображения в мобильном браузере. Есть ли простой способ настроить это? Может быть, есть способ сделать каждую ячейку рендерингом на новой строке, которая будет работать для меня? Что-то кросс-браузер поддерживается?

Или нужна редизайн?

Спасибо.

Answer 1

Да вы можете сделать что-то вроде этого падения дисплей таблицы для небольших видовых:

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

См: css-tricks.com/responsive-data-tables/

Answer 2

В мобильных устройствах - TD {дисплей: блок}

Answer 3

, если вы хотите, чтобы ваш сайт для мобильных устройств есть несколько вещей, чтобы избежать. Вы не можете использовать таблицы, потому что они сделаны с фиксированной шириной, поэтому они не будут отображаться правильно в меньшем мобильном. Также используйте относительное положение в css. Если вы хотите, чтобы их разная компоновка использовала их, используйте запрос @media. Или используйте jquerymobile для разработки интерактивного дизайна.

Answer 4

Обычно я формирую разметку как список (какой тип зависит от потребностей) или серию div. В основном каждое поле имеет содержащий элемент. Для простого примера я буду использовать DIV здесь, но тот обычно содержащий элемент последней инстанции для меня:

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

Это действительно лучше, потому что в то время как разметка, по крайней мере, немного более семантический, и это дает нам тонны возможностей.

Stacked этикетки:

.form-field label { display: block; } 

равноширокого этикетки:

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

Эта наценка также получает вас 2-вверх поля довольно легко

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

Вы получаете общую идею. Если вы сделаете это таким образом и при необходимости используйте ширину realtive, вы можете сделать форму полностью отзывчивой.

Answer 5

Продолжайте использовать таблицу. Это единственный подход, который позволяет вам отображать форму адаптивным способом, чтобы метки занимали только ту самую ширину, которая требуется для них самой длинной. Таблица автоматически получается разумно, и вы можете легко ее настроить.

Он также хорошо работает на мобильных устройствах при условии, что эти метки являются короткими, как и должно быть. Дисплеи мобильных устройств не являются , что узкие, что они не могут разместить ярлык типа «Город» и поле ввода шириной 15 символов.Когда в некоторых случаях возникают проблемы, пользователи могут справляться с ними, поскольку они сталкиваются с подобными проблемами; они могут, например, поворачивать устройство на 90 градусов.