响应式Web设计中的表

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

我通常将标记形式作为列表(哪种类型取决于需要)或一系列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-up字段

标记:

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

你得到了一般的想法.如果你这样做并在需要时使用实际宽度,你可以使表单完全响应.