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

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

Answer 3

在移动设备中 - td {display：block}

Answer 4

如果您希望自己的网站适合移动设备，则无需担心。你不能使用表，因为它们是用固定的宽度制作的，因此它不能在较小的mobile中正确显示。也可以在css中使用相对位置。如果你想使用不同的布局它们使用@media查询。或者使用jquerymobile设计交互式设计。

Answer 5

继续使用表格。这是唯一可以让您以自适应方式显示表单的方法，这样标签只需要最长的标签所需的宽度。表格会自动合理呈现，您可以轻松对其进行微调。

它也适用于移动设备，前提是标签很短，应该是这样。移动设备显示不缩小，因为它们无法容纳像“City”和15个字符宽的输入框这样的标签。当在某些情况下出现问题时，用户可以处理它们，因为它们会遇到类似的问题;例如，他们可以将设备旋转90度。

响应式Web设计中的表

5 个答案: