標準の HTML テーブルを使用して、表示するテーブル データを取得しました。データ型に基づいてセルの幅について少し予測できますが、それほど多くはありません (名前が長すぎる可能性があり、説明が 1 語しかない可能性があります)。
+--------------+--------------+-----+------+----------------------------------------------+
| name surname | name surname | num | date | one or two sentences making up a description |
+--------------+--------------+-----+------+----------------------------------------------+
これで、このデータは Android スマートフォンやその他の小型デバイスでも読み取れるようになります。問題は、フォント サイズが非常に小さい場合でも、結果のテーブルが画面よりも広くなることです。このフィドルで問題を確認できます: http://jsfiddle.net/orithena/nbbaU/4/ (必要に応じて、ワイド スクリーンで結果ウィンドウのサイズを変更します)。
テーブルが右にオーバーフローする場合、行を 2 つの行に分割し、1 つのセルが両方の行にまたがるようにします。また、1 つの行が一緒に流れる場合は、すべての行がそれを行う必要があります (テーブルのヘッダー行も)。そして、ユーザーがそれらを「1行」として解釈するための視覚的な合図を持つように、これらの「2行」の間の境界線の間隔を広くしたいと思います:
+==============+======+======================+
| name surname | num | one or two sentences |
+--------------+------+ making up a |
| name surname | date | description |
+==============+======+======================+
目的の結果のモックアップを次に示しますが、これは見苦しいマークアップです (ヘルパー セル、セマンティック セルの順序がスクリーン リーダー用に乱雑になっています)。これは静的です。つまり、サーバー側で行う必要があります: http://jsfiddle.net/orithena/ wwCYU/4/
セルを並べ替えたり、ヘルパー セルを使用したりせずに、フロー テーブル セルを実現する方法はありますか? できれば、各テーブル セルや Javascript/jQuery で div を使用しないでください。問題を完全に解決するわけではありませんが、メディア クエリは問題ないと思います。
私はウェブ上で問題を見つけさえしませんでしたが、間違ったキーワードを使用しているだけかもしれません... (ああ、IE 互換である必要はありません)。