Html 响应式网页设计中的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9746979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tables in a Responsive Web Design
提问by Brian Mains
I've followed the typical way a form has been setup in an application, which is to use a table that looks like this:
我遵循了在应用程序中设置表单的典型方式，即使用如下所示的表格：
<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>
Which produces a format like:
它产生的格式如下：
Field <TextBox>
Field <TextBox>
Most mobile designs lay it out this way:
大多数移动设计都是这样布局的：
Field
<TextBox>
Field
<TextBox>
Which is something I need to do because some of my forms are too long to display in a mobile browser. Is there an easy way to set this up? Maybe there is a way to make each cell render on a new line, which would work for me? Something cross-browser supported?
这是我需要做的事情，因为我的一些表单太长而无法在移动浏览器中显示。有没有简单的方法来设置它？也许有一种方法可以让每个单元格在新行上呈现，这对我有用吗？跨浏览器支持的东西？
Or is a redesign necessary?
还是需要重新设计？
Thanks.
谢谢。
回答by ryanve
Yea you can do something like this drop the table display for smaller viewports:
是的，您可以执行以下操作，为较小的视口删除表格显示：
@media (max-width:40em) {
table, thead, tbody, tfoot, th, td, tr { display:block; }
tr + tr { margin-top:1em; }
}
回答by prodigitalson
I usually do form markup as a list (which type depend on the needs) or a series of divs. Basically every field has a containing element. For a simple example I'll use a div here but thats usually the containing element of last resort for me:
我通常将表单标记作为列表（哪种类型取决于需要）或一系列 div。基本上每个字段都有一个包含元素。对于一个简单的例子，我将在这里使用一个 div 但这通常是我最后选择的包含元素：
<div class="input-text form-field">
<label for="the_element">Text Input</label>
<input id="the_element" type="text" />
</div>
This is really best because while the markup is at least a bit more semantic and it gives us a ton of possibilities.
这确实是最好的，因为虽然标记至少有更多的语义，但它为我们提供了大量的可能性。
Stacked labels:
堆叠标签：
.form-field label { display: block; }
Fixed width labels:
固定宽度标签：
.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%;}
This mark up also gets you 2-up fields pretty easily
这个标记还可以很容易地为您提供 2-up 字段
Markup:
标记：
<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
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%;}
You get the general idea. If you do it this way and use realtive widths when needed you can make the form totally responsive.
你得到了一般的想法。如果您这样做并在需要时使用实际宽度，您可以使表单完全响应。
回答by Praveen Vijayan
In mobile devices - td{ display:block }
在移动设备中 - td{ display:block }
回答by Venkat Selvan
if you want your site mobile friendly there are few things to avoid. You can't use tables because they made with a fixed width so it won't display properly in smaller mobile.Also use relative position in css.If you want to make different layout them use @media query. Or use jquerymobile to design interactive design.
如果您希望您的网站对移动设备友好，则需要避免的事情很少。你不能使用表格，因为它们是用固定宽度制作的，所以它不会在较小的移动设备中正确显示。也在 css 中使用相对位置。如果你想制作不同的布局，他们使用 @media 查询。或者使用jquerymobile来设计交互设计。
回答by Jukka K. Korpela
Keep using a table. It is the only approach that lets you have the form displayed in an adaptive way so that the labels take just the width that the longest of them requires. A table automatically gets rendered reasonably, and you can easily fine-tune it.
继续使用桌子。这是让您以自适应方式显示表单的唯一方法，以便标签仅采用其中最长所需的宽度。表格会自动合理地呈现，您可以轻松地对其进行微调。
It also works OK on mobile devices, provided that the labels are short, as they should be. Mobile device displays aren't thatnarrow that they could not accommodate a label like “City” and 15-characters wide input box. When problems arise in some cases, users can deal with them, as they encounter similar problems all around; they can, for example, turn the device 90 degrees.
它也可以在移动设备上正常工作，前提是标签应该很短。移动设备显示器并没有那么窄，以至于无法容纳“城市”这样的标签和 15 个字符宽的输入框。在某些情况下出现问题时，用户可以处理它们，因为他们到处都遇到类似的问题；例如，他们可以将设备旋转 90 度。
