如何创建响应式表列答案

【问题标题】：How to create a Responsive table columns如何创建响应式表列
【发布时间】：2014-07-28 04:35:02
【问题描述】：

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

这应该发生在手机上：

这在电脑上：

知道如何构建这个表吗？我试过只使用 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>

有什么想法吗？

【问题讨论】：

table和response不好混，不能在div里输出吗？

标签： html css responsive-design html-table

【解决方案1】：

您可以考虑许多选项。最简单的解决方案可能是拥有两个等宽的浮动表。在宽屏幕上，它们将彼此相邻浮动。在窄屏幕上，它们会在另一个之上显示一个。

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

【讨论】：

【解决方案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：如果你坚持使用表格。只需将文本放在 <td> 中的 div 中，然后应用我上面的方法。

【讨论】：

【解决方案3】：

使用这样的插件-responsive tables。

如果您想制作自定义响应式表格，您可以使用媒体查询来完成。

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

【讨论】：