HTML Перерыв Столбцы таблицы (TD) в несколько рядов на маленьких экранах

Question

у меня есть HTML таблицу:

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

Это показывает, как:

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

это хорошо на больших экранах, но то, что я хотите - разбивать столбцы на несколько строк по мере необходимости, если экран небольшой.

Поэтому, когда нужно таблица покажет, как:

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

Есть ли способ сделать это с чем-то вроде CSS?

Answer 1

Вы можете изменить display: table-row со средствами массовой информации запросов 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> 

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>