如何改變所有表TD細胞TR行

Question

我有這樣的一個表：

<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> 

它是這樣的：

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

，我想改變，像這樣在我的CSS的時候，屏幕尺寸小於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> 

是這樣：

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

在一個字：我想讓我的所有單元格分開排列

Answer 1

定義display:block您TD .WRITE這樣的：

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

入住這http://jsfiddle.net/DQtfa/