html - 如何创建响应式表格列

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

您可以考虑多种选择。最简单的解决方案可能是有两个等宽的 float 表。在宽屏幕上，它们会并排 float 。在狭窄的屏幕上，它们会在另一个之上显示一个。

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