html – 响应式Web设计中的表

发布时间：2020-12-14 16:42:00 所属栏目：资源来源：网络整理

导读：我遵循了在应用程序中设置表单的典型方式,即使用如下所示的表： table tbody tr tdField/td td@Html.TextBox("Field")/td /tr tr tdField 2/td td@Html.TextBox("Field2")/td /tr /tbody/table 产生如下格式： Field TextBoxField TextBox 大多数移动设计都

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

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

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

还是需要重新设计？

谢谢.

解决方法

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!