3

特定のブレークポイントより下では、必要なスペースの量を減らすために、テーブルの最初と最後の列のみを表示するレスポンシブ レイアウトがあります。

これがCSSです...

@media only screen and (max-width: 749px) {
    #content-container table thead th {
        display: none;
    }
    #content-container table thead th:first-child {
        display: table-cell !important;
    }
    #content-container table thead th:last-child {
        display: table-cell !important;
    }
}

@media only screen and (max-width: 749px) {
    #content-container table tbody tr td {
        display: none;
    }
    #content-container table tbody tr td:first-child {
        display: table-cell !important;
    }
    #content-container table tbody tr td:last-child {
        display: table-cell !important;
    }
}

tableHTML は、thead、th、tbody、tdおよびa最後の列の属性で構成される単純な表です。

<table>
    <thead>
        <tr>
            <th>Flight</th>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
            <th style="width: 140px;">Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td style="width: 140px;">
                <a style="display: inline-block;" href="#">Remove</a>
                <a style="display: inline-block;" href="#">Brief</a>
            </td>
        </tr>
    </tbody>
</table>

ただし、iPhone 画面でレンダリングすると、奇妙な結果が生じます。 最後の列がレンダリングされていない様子を示す画像。

ご覧のとおり、列は 1 つだけです。最後の列はレンダリングされていません。

デバイスの横向きを回転させてから縦向きに戻すと、最後の列が (時々) 表示されますが、これは奇妙です。下記参照。

これは、テーブルが実際にどのように見えるべきかを示しています。

この問題は私を壁に押し上げています。助けていただければ幸いです。

4

1 に答える 1

0

Quirksmode listに従って、サポートされていますが、静的コンテンツに対してのみです。可能な回避策は、代わりに列クラスを与えることです。

于 2013-03-05T09:34:42.317 に答える