0

配送先、請求先、銀行口座名義人の住所を記載した簡単な注文フォームを作成しました。現在、モノは大きな HTML テーブルとしてフォーマットされています。

+---------+---------+----------+----------+
|         | DelAddr | BillAddr | BankAddr |
| Name    |         |          |          |
| Street  |         |          |          |
| City    |         |          |          |
| Country |         |          |          |
| Tel     |         |          |          |
+---------+---------+----------+----------+

私が使用しているWordpressテンプレートはレスポンシブのものであるため、当然、これはレスポンシブではなく、モバイルでは正しく見えません.

どうすれば（可能であればJSなしで）、テーブルをレスポンシブにして、ビューポートが小さくなると次のようになります

+---------+---------+
|         | DelAddr |
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+
|         | BillAddr|
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+
|         | BnkAddr |
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+

CSSだけでも可能ですか？難点は、「分割された」行ごとに説明列を表示することです。

4

2 に答える 2

2

Chris Coyer には、これに関する非常に優れた記事があります: Responsive Data Tables。

ここに引用があります：

最大の変更点は、テーブルに関連するすべての要素をブロック レベルに設定することで、テーブルがテーブルのように動作しないようにすることです。次に、最初に追加したゼブラ ストライプを維持することで、テーブルの各行がそれ自体でテーブルになるようになりますが、幅は画面と同じになります。横スクロール不要！次に、「セル」ごとに、CSS で生成されたコンテンツ (:before) を使用してラベルを適用します。これにより、データの各ビットが何を意味するかがわかります。

于 2013-02-01T18:10:25.247 に答える
0

完全に無料でレスポンシブデザインに最適なブートストラップを使用することもできます....そして、そのためにjsは必要ないと思います。それでも含まれていますが、それはgreatcssライブラリです

于 2013-02-01T22:43:33.433 に答える