1

私は現在、自分の作品の Web サイト用のモバイル スタイル シートを作成する任務を負っていますが、最終段階のいくつかで壁にぶつかっています。

私の主な制約は、ソース HTML を編集できず、提供されたソースで作業する必要があることです。

ボタン (テーブル セル) を独自の行にドロップすることで、幅が 450px になったときにボタンを含むテーブルを応答させたいと考えています。私はこれを単に介して行うことができますdivsが、ではありませんtables。http://test.aboutcher.co.uk/so/tables.htmlでやりたいことの簡単な例を作成しましたが、表でこの効果をどのように達成できるかわかりません。

テーブルはレイアウトにとって悪い考えであることは知っていますが、ソースでこれを変更することはできないので、自分のやり方で戦わなければなりません。

編集
私は私の問題を発見しましdisplay:blockた.スタイルを受け取っている他の2つがdisplay:blockを無視する原因となっているソースにスタイルが適用されていない非セルがあります.

4

2 に答える 2

0

これは理想的な方法ではありませんが。しかし、私が見ているように、別のテーブル行を作成し、最初は表示なしで非表示にできると思います。次に、CSSメディアクエリを使用します。ここで、幅を指定します。XXpx; 上の2番目の列をに設定しdisplay: none;、下のテーブル列をに設定しますdisplay : block;

それが理にかなっていることを願っています

@media (max-device-width = 400px) {
  .second-column{display:block;}
.first-column{display:none;}
}
于 2013-02-25T11:31:15.010 に答える
0

あなたはあなたがあなたであることを定義し、あなたtdとしてdisplay:blockそれらを操作する必要がありますdiv。このデモをご覧ください：http：//jsfiddle.net/68EQK/

于 2013-02-25T11:33:51.853 に答える