web-dev-qa-db-ja.com

レスポンシブレイアウトのビューテーブル

パネル内にビューテーブルブロックがあります。

テーブルがパネルからはみ出しているので、制限する方法を理解しようとしています。 CSSをさまざまな幅に設定してみましたが、常に無視されます。個々の列の幅、色などは変更できますが、幅は変更できません。

ビューテーブルはこれらの設定を無視し、コンテンツの幅に合わせて表示しますか?幅を設定する最良の方法は何ですか?

レスポンシブテーマ(パネル内)でビューテーブルを使用するためのヒントはありますか?

Drupal 7.23、 Views 7.37、 Panels 7.33、 Omega -4

更新:このテーブルのCSSでは、以前にtable { width: 100%;(および!important)。列が非常に多い場合は、テーブル全体の幅がパネルの100%になるので、テーブルに適用されていることを知っています。

この問題は、列が多く、列のコンテンツテキストが広い場合に発生します。その後、テーブルは100%を超えてオーバーフローします。フォントサイズを変更することで薄くできますが、ビューテーブルの幅がどのように設定されているかを理解しようとしています。

ビューテーブルプラグイン/モジュールに関して、私は FooTableResponsive Tables および(sandbox) Better Views Tables を見ています。これらはどれも成熟したモジュールではないので、それらを使用することにかなり神経質になっています。

5
Taylor Taff

Cssでテーブルの幅を100%に設定します。他のルールがこれを上書きしている場合は、具体性を高めるか、!importantを追加する必要があります。

テーブルの列をさらに制御する必要がある場合は、レスポンシブテーブル用のクールなモジュール https://drupal.org/project/sensitive_tables があります。まだ自分で試したことはありません。

3

Views Responsive Grid モジュール(20K近くのインストールが報告されています)、およびIMOがかなり「成熟」している公式のD7バージョンをご覧ください。

これについての引用は次のとおりです(プロジェクトページから)。

...レスポンシブ(モバイルフレンドリー)グリッドレイアウトでコンテンツを表示するためのビュープラグインを提供します。標準のビューグリッド表示をモバイルで機能させるのではなく、同じ機能を提供しますが、テーブルではなくDIVを使用します。モバイルディスプレイ上のコンテンツを適切にスタックする水平または垂直グリッドレイアウトを指定する機能も提供されます。

特徴:

  • 水平または垂直グリッドレイアウト
  • レスポンシブテーマで使用するカスタムクラス
2
Pierre.Vriens

Responsive Tables Filter モジュールで大成功しました。これは、7バージョンと8バージョンの両方を備えた成熟したモジュールです。それは自動的にビューテーブルを応答可能にし、WYSIWYGエディターで挿入されたテーブルも応答可能にします。これは私が必要とするサイトにとって大きなプラスです。レスポンシブテーブルには Tablesaw メソッドを使用します。

0
plousia