基本的に
レスポンシブテーブルは、幅が100％のテーブルです。
次のCSSを使用してテーブルを設定するだけです。
.table { width: 100%; }
メディアクエリを使用して、クラスを追加する（またはnth-childなどを使用してターゲットを設定する）ことにより、画面のサイズに応じて列を表示/非表示/操作できます。
@media screen and (max-width: 320px) {
.hide { display: none; }
}
HTML
<td class="hide">Not important</td>
より高度なソリューション
大量のデータを含むテーブルがあり、小さな画面のデバイスで読みやすくしたい場合は、他の多くのソリューションがあります。
- css-tricks.comは、大きなデータテーブルを処理するために この記事 を提供しています。
- Zurbもこの問題に遭遇し、javascriptを使用して 解決済み になりました。
- Footables は、この問題の解決に役立つ優れたjQueryプラグインです。
- ElvinArzumanoğl が投稿したように、これは素晴らしい 例のリスト です。
ブロックレベルの要素とフロートでできるようにtd/thを制御したい場合は、不可能です。 thの上または下にtdを浮動させる方法はありません。
Wordpressプラグイン Magic Liquidizer Responsive Table をお勧めします。
レスポンシブテーブルを作成するには、各「td」を100％作成し、モバイルの「td」に関連する見出しを挿入します（「768px」幅未満）。