html – 响应式Web设计中的表

前端之家收集整理的这篇文章主要介绍了html – 响应式Web设计中的表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遵循了在应用程序中设置表单的典型方式,即使用如下所示的表:
<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/

原文链接:https://www.f2er.com/html/227001.html

猜你在找的HTML相关文章