如何改变所有表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/