Таблицы в адаптивном веб-дизайне

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 / respive-data-tables /

Answer 2

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

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

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

С накоплением меток:

  .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 поля вверх

Разметка:

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

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

Answer 3

В мобильных устройствах - td {display: block}

Answer 4

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

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

Answer 5

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