How to make a table responsive? (stack columns)

Question

I have a simple table with this structure.

<table>
 <tr>
  <td>1</td>
  <td>2</td>
</tr>
</table>

When I resize my browser window it looks this way:

| 1 | | 2 |

How can I make it responsive to make it look like this:

| 1 |
| 2 |

I tried display: block but I guess I should use something difference.

Answer 1

If you want this behaviour I do not think that tables are the way to go. Maybe take a look at how bootstrap handles their columns.

http://getbootstrap.com/

with that said. It can be done like this:

@media (max-width: 300px) {
  td {
    display: block;
  }
}

Here is a fiddle where it works. https://jsfiddle.net/90pvLy8t/