13

私は現在、ウェブサイトをレスポンシブにすることに取り組んでいますが、問題は、ページのコンテンツに触れずにレスポンシブにする必要があることです。したがって、ページ上ですべてが同じままですが、新しいスタイルシートと小さな Javascript (主に CSS) を使用して、このタスクを達成しようとしています。

Web サイトは主にテーブルで作成されているため、ブラウザのサイズが変更されたとき (またはモバイル デバイスでアクセスされたとき)、「tr」内の 2 番目の「td」が隣り合うのではなく、最初の「td」の下にスタックされるようにします。 .

「td」要素に左フロートと幅 100% を指定すると、Firefox では問題なく動作しましたが、Chrome と Safari では両方の「td」が 50% で同じ行にあります。

何かアイデアがあれば教えてください。何でも大歓迎です！

4

6 に答える 6

37

を使用display:blockしてtr tdレイアウトを調整します。

tr td {
  padding: 20px 40px;
  border: 1px solid black;
  display: block;
}
<table>
  <tr>
    <td>Damn</td>
    <td>This</td>
    <td>Table</td>
    <td>Layout</td>
  </tr>
</table>

于 2013-03-22T13:08:04.703 に答える
5

表示を変更する CSS を試して、別の行に移動します。

td {
  display: block;
  clear:both;
}

作成したばかりの例を見る

于 2013-03-22T13:07:21.653 に答える
1

あなたがやろうとしていることがうまくいかないか、あなたに大きな頭痛の種を引き起こします. テーブルは、レスポンシブ デザインに使用するようには設計されていません。コードに触れることができないと言うなら、あなたは非常に立ち往生しています。これを回避する最善の方法は、コードを書き直し、関連するテーブルを DIV や P などに置き換え、CSS、jquery、およびメディア クエリを使用してサイトをレスポンシブにすることです。

現在、サイトをレスポンシブにする唯一の方法は、ページの読み込み時に jquery を使用してすべてのテーブルを DIV や Ps などに置き換えてから、CSS、jquery、およびメディア クエリを使用してサイトをレスポンシブにすることです。これは推奨される方法ではなく、これが 100% 機能することを保証することさえできません。

于 2013-03-22T13:07:44.273 に答える
0

divテーブル セル内にを 2 つ入れてみfloat leftましたか。テーブルが折りたたまれたら、積み重ねる必要があります。

于 2013-03-22T13:05:16.507 に答える
0

表形式のデータではなく、レイアウトにテーブルを使用しているようです。テーブルは、表形式のデータにのみ使用してください。

代わりにグループ化コンテンツを使用する必要があります。より具体的には、div要素:

<div>
    <div>Top</div>
    <div>Bottom</div>
</div>

上部と下部のコンテナ内に存在するコンテンツのタイプによっては、別の要素を一緒に使用したい場合があることに注意してください。

于 2013-03-22T13:07:26.217 に答える
0

もう 1 つの可能性は、政府のサイトを 内にネストするiframeことです。そうすれば、JQuery のようなものを使用して、サイトに対して必要なことを行うことができます。

于 2013-03-22T13:14:10.337 に答える