html – 响应式Web设计中的表

前端之家收集整理的这篇文章主要介绍了html – 响应式Web设计中的表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遵循了在应用程序中设置表单的典型方式,即使用如下所示的表:
  1. <table>
  2. <tbody>
  3. <tr>
  4. <td>Field</td>
  5. <td>@Html.TextBox("Field")</td>
  6. </tr>
  7. <tr>
  8. <td>Field 2</td>
  9. <td>@Html.TextBox("Field2")</td>
  10. </tr>
  11. </tbody>
  12. </table>

产生如下格式:

  1. Field <TextBox>
  2. Field <TextBox>

大多数移动设计都是这样设计的:

  1. Field
  2. <TextBox>
  3. Field
  4. <TextBox>

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

还是需要重新设计?

谢谢.

解决方法

是的,你可以做这样的事情,删除表格显示为较小的视口:
  1. @media (max-width:40em) {
  2. table,thead,tbody,tfoot,th,td,tr { display:block; }
  3. tr + tr { margin-top:1em; }
  4. }

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

猜你在找的HTML相关文章