HTML Break Table Columns (TD) To Multiple Rows On Small Screens

Question

I have a html table:

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

This shows as:

-------------------------
|data...|data...|data...|
-------------------------

which is fine on large screens, but what i want is to break the columns into multiple rows as needed if the screen is small.

So when needed the table would show as:

----------
|data....|
|--------|
|data....|
|--------|
|data....|
----------

Is there a way to do this with something like css?

Answer 1

You can change to display: table-row with media queries Fiddle

@media(max-width: 480px) {
  td {
    display: table-row;
  }
}

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

Answer 2

You can use display:block as for break the column

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

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>