响应式网页设计中的表格答案

【问题标题】：Tables in a Responsive Web Design响应式网页设计中的表格
【发布时间】：2012-04-02 13:40:01
【问题描述】：

我遵循了在应用程序中设置表单的典型方式，即使用如下所示的表格：

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

这是我需要做的事情，因为我的某些表单太长而无法在移动浏览器中显示。有没有简单的方法来设置它？也许有一种方法可以让每个单元格在新行上渲染，这对我有用吗？支持跨浏览器吗？

还是需要重新设计？

谢谢。

【问题讨论】：

标签： html css mobile web responsive-design

【解决方案1】：

如果您希望您的网站对移动设备友好，则可以避免一些事情。您不能使用表格，因为它们以固定宽度制作，因此无法在较小的移动设备中正确显示。还可以在 css 中使用相对位置。如果您想制作不同的布局，请使用 @media 查询。或者使用 jquerymobile 进行交互设计。

【讨论】：

【解决方案2】：

是的，你可以做这样的事情，为较小的视口删除表格显示：

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

见：css-tricks.com/responsive-data-tables/

【讨论】：

【解决方案3】：

我通常将表单标记作为列表（取决于需要的类型）或一系列 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%;}

你大概明白了。如果您这样做并在需要时使用实际宽度，您可以使表单完全响应。

【讨论】：

【解决方案4】：

继续使用桌子。这是唯一能让您以自适应方式显示表单的方法，以便标签仅采用最长的标签所需的宽度。表格会自动合理渲染，您可以轻松对其进行微调。

它在移动设备上也可以正常工作，前提是标签应该很短。移动设备显示屏并没有那么窄到无法容纳像“城市”这样的标签和 15 个字符宽的输入框。在某些情况下出现问题时，用户可以处理它们，因为他们遇到类似的问题；例如，他们可以将设备旋转 90 度。

【讨论】：

【解决方案5】：

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

【讨论】：