1

幅 320 ピクセルの携帯電話まで、さまざまなデバイスに表示する必要があるデータのテーブルがあります。

css メディア クエリを使用してブラウザ ウィンドウのサイズを検出し、{display:block; 標準バージョンを非表示にします。

レスポンシブ バージョンは、列を互いに積み重ねるだけです。

私の質問は、レスポンシブ バージョンにどの html タグを使用すればよいかということです。現在、機能しているが正しくないように見える一連のdivを使用しています。それともそうですか？

<div class="standard_version">
    <table>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <td>4rq4</td>
            <td>vdg34</td>
            <td>xcb245</td>
            <td>12341234</td>
        </tr>
        <tr>
            <td>sdvxc4</td>
            <td>898fg</td>
            <td>sfasdf35</td>
            <td>451345</td>
        </tr>
        <tr>
            <td>asdfasf</td>
            <td>zxdfw</td>
            <td>1A2313</td>
            <td>9732</td>
        </tr>
    </table>
</div>


<div class="responsive_version">

    <div class="responsive_version_tr">
        <div class="responsive_version_th">Column A</div>
        <div class="responsive_version_th">Column B</div>
        <div class="responsive_version_th">Column C</div>
        <div class="responsive_version_th">Column D</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">4rq4</div>
        <div class="responsive_version_td">vdg34</div>
        <div class="responsive_version_td">xcb245</div>
        <div class="responsive_version_td">12341234</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">sdvxc4</div>
        <div class="responsive_version_td">898fg</div>
        <div class="responsive_version_td">sfasdf35</div>
        <div class="responsive_version_td">451345</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">asdfasf</div>
        <div class="responsive_version_td">zxdfw B</div>
        <div class="responsive_version_td">1A2313</div>
        <div class="responsive_version_td">9732</div>
    </div>

</div>

前もって感謝します！

4

2 に答える 2