HTML break table (TD) columns for multiple rows on small screens

Question

I have an html table:

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

It shows how:

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

which is good on large screens, but I want to split the columns into several rows as needed if the screen is small.

Therefore, if necessary, the table will look like:

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

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

Answer 1

You can go on display: table-rowusing media queriesFiddle

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

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

Run codeHide result

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>

Answer 3

td 100%.

@media screen and (max-width:768px){
th,td { display:block; width:100%; }
  }

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
      </tr>
    </tbody>
  </table>

Hide result