0

次のようなテーブルを再構築することは可能ですか?

<table>
    <tr>
        <td>information 1</td>
        <td>information 2</td>
    </tr>
</table>

CSSでこのようなものにするには?:

<table>
    <tr>
        <td>information 1</td>
    </tr>
    <tr>
        <td>information 2</td>
    </tr>
</table>

私が尋ねているのは、 のコンテンツで満たされたこのテーブルが、モバイル ディスプレイ用divに を最小化すると見栄えがよくないためです。div

更新、これを行う必要がある理由: レスポンシブ デザインを希望する顧客向けの Web サイトを構築しています。「問題」は、顧客が html/css をあまりよく知らないため、ページにコンテンツを提供するときに WYSIWYG エディターを使用することです。そしてもちろん、彼/彼女は Microsoft Office を知っており、表を使用してそのプログラムで行われるのと同じようにコンテンツを作成します。

4

3 に答える 3

4

tdメディアクエリを使用し、cssを適用してセルを次の行のように表示することにより、sを効果的にラップできます。ただし、人々が何を見ているのかを理解するのに役立つ、いくつかの優れたビジュアルキューを提供することをお勧めします。これがフィドルのデモンストレーションです–プレビューウィンドウのサイズを変更します。

元のマークアップを使用し、次のCSSを適用するとtd、ウィンドウの幅が400ピクセル未満の場合に2番目が折り返されます。

td {width: 200px; border: 1px solid black;}
@media screen and (max-width: 400px) {
    td {
        width: 100%;
        float: left;
    }
}
​
于 2012-09-18T19:55:52.213 に答える
0

私はあなたの問題を理解しています、これはそれを解決するでしょう。（醜い修正）

td {
  display: block;
  clear: both;
}

むしろ、テーブルではなく、divとcssを使用してください;）

于 2012-09-18T19:56:47.427 に答える
0

マークアップの表示にのみ影響するため、css を使用してこれを行うことはできません (少なくとも簡単ではありません)。ただし、ユーザーがモバイル ブラウザを使用してサイトにアクセスしていることを検出した場合は、JavaScript を使用することもできます。ただし、これらのことをどのように行うかという問題は、元の質問の範囲外です。

多くの Web サイトには、モバイル バージョンと非モバイル バージョンがあります。PHP、Javascript などでユーザー エージェントを検出するための事前に作成されたスクリプトがあります。

于 2012-09-18T19:52:25.333 に答える