如何创建响应表列

Question

我需要您的帮助，我正在开发响应式网站和联系页面，该表单可能会出现在两列或一列中。

这应该在手机中发生：

这是在电脑上：

知道如何构建这个表吗？我尝试过使用css，但每个td的HTML都是这样的：

<tr>
    <td colspan="2" class="single">Telefone</td>
</tr>
<tr>
    <td colspan="2" class="single"><input class="input-left" type="text" id="telefone" name="telefone" maxlength="13" autocomplete="off" title="Digite um número de telefone para contato"></td>
</tr>

有什么想法吗？

Answer 1

您可以考虑许多选项。最简单的解决方案可能是有两个宽度相等的浮动表。在宽屏幕上，它们会相互浮动。在狭窄的屏幕上，他们会在另一个上面显示一个。

填充这些表时，可以向它们添加相同数量的行。

Answer 2

Live demo

您可以使用css中的column-width属性，根据页面大小实现自动文本格式。

<强> HTML

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus malesuada, ante a accumsan pretium, lorem magna hendrerit turpis, eu tempor neque dui non est. Quisque suscipit accumsan rutrum. Praesent in nisi nec felis tincidunt interdum. Cras scelerisque justo eget lectus pulvinar feugiat. Aliquam nec volutpat risus. Vivamus dapibus augue felis. Sed quis posuere dui. Donec ultricies nisl eget erat convallis faucibus at sodales metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
</div>

<强> CSS

div
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
} 

PS：如果您坚持使用表格。只需将文本放在div中<td>内，然后应用我的上述方法。

Answer 3

使用像这样的插件 - responsive tables。

如果您想制作自定义响应表，可以使用媒体查询来执行此操作。

我为解决方案编写了一个自定义响应表来检查 - table。