4

私のページの 1 つで、ブラウザが小さくなるとレイアウトが変わるレスポンシブ テーブルがあります。この fiddleに示すように、テーブルの列に値がある場合、すべてが正しく機能します。

ただし、列に値がない場合、この fiddleに示すように、テーブルのレイアウトの小さなバージョンに表示されないものがあります。

私は何が欠けていますか？

また、以下の動作しないバージョンから必要なコードをコピーしました。

@media only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }

    /* Label the data */
    td:nth-of-type(1):before { content: "MFG P/N"; }
    td:nth-of-type(2):before { content: "MFG Name"; }
    td:nth-of-type(3):before { content: "Part ID"; }
    td:nth-of-type(4):before { content: "Description"; }
    td:nth-of-type(5):before { content: "Cost"; }
    td:nth-of-type(6):before { content: "Price"; }
    td:nth-of-type(7):before { content: "On Hand"; }
    td:nth-of-type(8):before { content: "On Order"; }
    td:nth-of-type(9):before { content: "Allocated"; }
    td:nth-of-type(10):before { content: "Shipped"; }
    td:nth-of-type(11):before { content: "Report"; }
    td:nth-of-type(12):before { content: "RMA"; }
    td:nth-of-type(10):before { content: "File"; }
    td:nth-of-type(10):before { content: "Add Part"; }
}
4

1 に答える 1

0

あなたの問題は、あなたが説明しているものではありません。「非動作例」フィドルでテーブルを見ると、結果には一連の空のテーブルセルが表示されません-テーブルセルは表示されません。

代わりに、次を出力しています。

<td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>

あなたはかなり巧妙な CSS トリックを使用して、各セルの前に列テキストを表示しています (これには拍手を送ります)。しかし、私の印象では、CSS トリックがどのように機能するかを本当に理解していないようです。エラーがあります。理にかなっていますので、分解してみましょう。

CSS は、セレクター:nth-of-type(N)を使用して の前にいくつかのコンテンツを追加することに基づいてい<td>ます。グリッドには、 Company、Cust.No、Contact、Address、Phone、Email、File、Created Date、Notesの 9 つの列があります。

メディア クエリに基づいて、ページが特定の幅を下回ると、次のことが起こります。

thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

このブロックは、<thead>テーブルの列ヘッダーを含むタグを、画面の表示スペース (表示可能領域の左上 10,000 ピクセル) の外に移動します。

table, thead, tbody, th, td, tr { 
    display: block; 
}
td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

コメントにあるように、これらのブロックdisplay: tableはテーブルのデフォルトの CSS レンダリングを無効にし、代わりにそこに含まれるすべての要素を強制的にblock表示し始めます。つまり、新しい各要素はデフォルトで新しい行から開始されます。これが、セルが 1 つの行内で重なり合って表示される原因です。

タグのはpadding-left: 50%、<td>データをテーブルの中央から表示するように強制するものです。

さて、魔法のために：

td:nth-of-type(1):before { content: "MFG P/N"; }

この行には、「任意の<td>タグについて、親要素内の (1) 番目のタグである場合、その疑似要素<td>にテキスト 'MFG P/N' を挿入する」と記載されています。:before

:before疑似要素は、DOM の外側に表示される CSS 構成要素です(マークアップやページの要素を調べることでは確認できません) が、画面には表示されます。適用先の要素 ( )内でレンダリングされ<td>ます。次の CSS は、表示方法を指示します。

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

言い換えれば、position: relative <td>親内で、:before疑似要素6pxを上端から配置6pxし、左端からなど45%の幅にします。<td>

これは、行の前に「ヘッダー」を挿入するものです。

問題は次のとおりです。

HTML/JS は現在、動作しない例で次の HTML をレンダリングしています (重要な部分を示すために単純化されています)。

<table>
  <thead><!-- omitted because it is off-screen --></thead>
  <tbody>
    <tr class="odd">
      <td valign="top" colspan="10" class="dataTables_empty">
        No data available in table
      </td>
    </tr>
  </tbody>
</table>

内には1 つしかない<td><tbody>ことに注意してください。これが、先頭に複数のヘッダーが追加された複数の行を表示しない理由です<td>。CSS が作用するセルは 1 つだけです。

代わりに、必要なヘッダー値を含む一連の空のボックスを表示する場合は、HTML 出力を次のように変更する必要があります。

<table>
  <thead><!-- still omitted, because it still doesn't matter --></thead>
  <tbody>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td><!-- 9 columns, to match your 9 headers -->
  </tbody>
</table>

:nth-of-type(1)これにより、スルーの CSS ルールが:nth-of-type(9)必要なヘッダーを適切にレンダリングできるようになり、 (改行しないスペース) を使用して、「見えない」コンテンツを提供することにより&nbsp;、テーブルがすべてのブラウザーでタグを表示するように強制されます。<td>

これが役立つことを願っています。

追加のメモ:

現在の CSS には、不要なジャンクがたくさん含まれています。具体的には：

td:nth-of-type(10):before { content: "Shipped"; }
td:nth-of-type(11):before { content: "Report"; }
td:nth-of-type(12):before { content: "RMA"; }
td:nth-of-type(10):before { content: "File"; }
td:nth-of-type(10):before { content: "Add Part"; }

:nth-of-typeルールの最後の 5 つ。テーブルに 9 列しかないため、現在の HTML レイアウトを使用すると、これらが適用されることはありません。

さらに、対象とする 3 つの個別のルールがあり:nth-of-type(10)ます ... これは、 10 番目の列があったとしても、これらのルールの最後"Add Part"のもの ( ) のみが適用されることを意味します。これは、前の両方を上書きするためです。

于 2013-04-23T20:24:36.667 に答える