3

私はこのようなテーブルを持っています：

<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

そして、画面サイズが420px未満の場合、CSSでこのように変更したいと思います。

<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

一言で言えば：すべてのセルを別々の行に配置したい

4

1 に答える 1

8

TDに定義display:blockします。次のように記述します。

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

これをチェックしてくださいhttp://jsfiddle.net/DQtfa/

于 2012-06-19T11:02:52.347 に答える