そのように見える2列のテーブルがあります。
これが私が必要としているもので、約1000pxの利用可能なスペースをカバーしています。しかし、私の問題は、たとえばモバイルデバイスのiPhoneで表示する場合です。各アイテムの後にテーブルを壊すのではなく、画面に合うようにテーブルを絞るだけです。これは、私が想像していることです。テーブルを絞ってテーブルのレイアウトを変更する代わりに、最善の方法は何でしょうか。私が考えることができる唯一のことは、デバイスタイプをチェックし、javascriptを介してテーブルを作成することです。モバイルデバイスでない場合は定期的に、モバイルの場合はテーブルを複数の行を持つ1つの列に変更します。
これがこれを行うための最良の方法でしょうか？
まず、レイアウトにテーブルを使用するのをやめ、これらの問題を修正するだけでなく、SEOにも役立つ新しいHTML5セマンティックタグを使用し、純粋なCSSの力を使用して、CSSの配置、フロート、およびレスポンシブレイアウトを設計する方法を学びます、使用するよりもデバイスごとに異なるレイアウトが必要な場合@media queries
メディアクエリリファレンス
メディアクエリを使用する必要があります。
方法については、この記事をお読みください。
メディアクエリの例：
@media only screen and (max-device-width: 480px) {
}
最善の方法は、テーブルをまったく使用しないことです。一般に、テーブルは「責任を負う」傾向があまりありません。
見栄えが良くなるように、2つのdivを使用し、メディアクエリを使用してdivを配置することを検討する必要があります。Twitterがどのように機能するかを確認することをお勧めします。ここでレスポンシブグリッドを見つけることができます
このトピックについて私が読んだより良い記事の1つは、 cssトリックで見つけることができます