How to create a Responsive table columns

Question

I need your help, I'm developing a responsive site, and contact page, the form may appear in two or one column.

This should happen in a mobile:

And this on a computer:

Any idea how to build this table? I've tried using just css, however the HTML of each td is this:

<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>

Any idea?

Answer 1

There are many options that you can consider. The easiest solution, probably, is to have two floating tables of equal width. On wide screens they will float next to each other. On narrow screens they will show one on top of the other.

When you populate these tables, you can add an equal number of rows to them.

Answer 2

Live demo

You can achieve auto text format depending on page size by using column-width property in css.

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: If you insist to use tables. Just put the text inside the <td> in a div and apply my above method.

Answer 3

use a plugin like this-responsive tables.

if you want to make custom responsive table you can use media-queries to do it.

i wrote a custom responsive table for a solution check this-table.