Question

I have a table like this:

<table>
    <tr>
       <td> A-1 </td>
       <td> A-2 </td>
       <td> A-3 </td>
    </tr>
    <tr>
       <td> B-1 </td>
       <td> B-2 </td>
       <td> B-3 </td>
    </tr>
</table>

It is something like this:

A-1 A-2 A-3
B-1 B-2 B-3

And i want to change that like this in my CSS when the screen size is below 420px:

<table>
       <tr> <td> A-1 </td> </tr>
       <tr> <td> A-2 </td> </tr>
       <tr> <td> A-3 </td> </tr>
       <tr> <td> B-1 </td> </tr>
       <tr> <td> B-2 </td> </tr>
       <tr> <td> B-3 </td> </tr>
</table>

To be like this:

A-1
A-2
A-3
B-1
B-2
B-3

In one word : I want to have all of my cells in separated rows

Answer 1

Define display:block to your TD .Write like this:

@media screen and (max-width:420px){
    td{display:block}
}

Check this http://jsfiddle.net/DQtfa/