html - レスポンシブ テーブル、スマートな方法

Question

データを含むテーブルがあります。表形式のデータ。そして、それはこのように見えます。

このフィドルを参照してください。

今、私が望むのは、より狭い画面に表示されたときに、テーブルが次のように見えるようにすることです。これにより、水平スクロールバーが表示されず、同じ視覚構造が維持されます。

（または、必要に応じて、このフィドルのように。）

さて、私の質問は、どうやってそれを行うのですか? 私は CSS のみの方法を好みますが、これまでのところ、CSS だけでそれを行うことはできませんでした。(2 番目のフィドルにはrowspan、同等の CSS がない属性が含まれています。)

HTMLはサーバー側で生成されるため、ウィンドウの幅に応じて 2 つのレイアウトのいずれかを生成できますが、ウィンドウのサイズ変更には応答しません。

私は小さなJavascriptに反対しているわけではありませんが、この場合、ウィンドウのサイズ変更で最初のテーブルを2番目のテーブルに変換するには、セルごとに分解して再構築する必要があり、それはやり過ぎだと思います. すべての作業を実行できるメディア クエリをまだ探しています。

少し実験して、これに近づきましたが、IE8とIE9では機能しません。

それで、これに取り組む方法を誰かが考えていますか？理想的なソリューションは、さまざまな高さ (2 行以上のテキスト) のテーブル セルと任意の数の列で機能します。

Answer 1

要素をインライン ブロックできます。プレイする時間があまりありませんでしたが、次のようなものです。

#content {
    border:1px solid;
    border-collapse:collapse;
}
#content td, #content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
}
#content td {
    display: inline-block;
    width: 100px;
}

しかし、それは最も美しい作品ではありません！

http://jsfiddle.net/8H3bN/