キーポイント

• レスポンシブなWebデザインとテーブルは完全に一致していませんが、安定した構(gòu)造により、機能比較テーブルの改善の余地がまだあります。
• 成功した応答性関數(shù)比較テーブルは、製品を簡単に區(qū)別し、関數(shù)を明確に識別し、製品機能が存在するかどうかを示す必要があります。
レスポンシブ機能の比較テーブルを作成するための2つのオプションには、Flexbox（最新のブラウザーサポートレートが80％を超え、プレフィックスを必要とするブラウザーバージョンを含む93％のサポートレートを超えて）を使用し、追加のタグとAriaの役割を使用しています（Androidの古いバージョンに適していますおよびiOS）。
オプションが選択されているかどうか、読みやすさ、アクセシビリティ、および可用性を考慮する必要があります。レスポンシブ機能の比較テーブルを設(shè)計して、障害のあるユーザーを含むすべてのユーザーがフレンドリーでアクセスできるようにします。

レスポンシブWebデザインとテーブルは、最高のパートナーではありません。多くの人々がこれを研究し、多くの方法を設(shè)計しました（その一部は最近、SitePointの記事にまとめられました）。しかし、私たちはまだ完璧なソリューションから長い道のりであり、検索は続いています。

一般的な狀況は依然として複雑ですが、いくつかの特定の狀況はより多くの注意を引くことができます。ここで話しているのは、関數(shù)比較テーブルです。多くの場所で遭遇します。車を選択し、どの追加のオプションを選択しても、パッケージと機能を比較することができます。ポータルのお金と引き換えに。

このタイプのテーブルには比較的安定した一貫した構(gòu)造があるため、小さな畫面に表示されると、その動作をよりよく制御できます。

関數(shù)比較の構(gòu)造表

クラシック比較テーブルは、少なくとも3つの製品（列に表示）を組み合わせて、下の行に関數(shù)が表示されます。従來の構(gòu)造では、各行の最初のセルには関數(shù)の名前が含まれていますが、各製品の下のセルにはチェックマークまたは関數(shù)が製品に屬するかどうかを示す他の記號が含まれています。この古典的な構(gòu)造の素晴らしい例を見つけることができます。ここ、ここ、そしてここです。

これらの例に基づいて、次のコードを使用して、比較テーブルの構(gòu)造を要約できます。

上記の要素を識別するのは簡単です：製品名、機能名、および関數(shù)が存在するか存在しないかを示すマーク。 ?コードはチェックマーク（?）文字を表すことに注意してください。

<table>
  <thead>
    <tr>
      <th></th>
      <th>產(chǎn)品 1</th>
      <th>產(chǎn)品 2</th>
      <th>產(chǎn)品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>?</td>
      <td>?</td>
      <td>?</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>?</td>
      <td>?</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>?</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>?</td>
    </tr>
  </tbody>
</table>

今、私たちは問題の根本にいます。テーブルが低畫面幅で最適な効率を維持するには、次の條件を満たす必要があります。

ユーザーは製品を簡単に區(qū)別できる必要があります

関數(shù)は簡単に認識する必要があります

製品の機能が存在するかどうかを明確にする必要があります。
この結(jié)果を達成する最良の方法は、機能名を含むセルを、関數(shù)の存在または不在をマークする他の3つのセルの上部に移動することです。
• プラン1：FlexBox

これをどのように行いますか？答えの1つはFlexBoxです。 FlexBoxとは何か、またはレビューが必要な場合は、このトピックに関するNick Salloumの最近の記事をご覧ください。私たちの殘りは解決策を掘り下げることができます。

まず、小さな畫面でのみ変更が行われるようにする必要があります。これを行うには、メディアクエリを使用してコードを見つけます。

<table>
  <thead>
    <tr>
      <th></th>
      <th>產(chǎn)品 1</th>
      <th>產(chǎn)品 2</th>
      <th>產(chǎn)品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>?</td>
      <td>?</td>
      <td>?</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>?</td>
      <td>?</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>?</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>?</td>
    </tr>
  </tbody>
</table>

この一連のルールには、魔法の効果を達成できる重要なことがいくつかあります。

テーブル行の表示値を変更して屈曲し、その子要素を列に均等に配布するように伝えます。

• 次に、セルに通常のコンテナに正規(guī)化するように指示します（デフォルト値を保存すると、特にサイズの點でテーブルルールに干渉します）。
• 次のステップは、各行の最初のセルを100％幅の幅に配置し、コントラストを強化するために背景色を変更することです。プロセスルールは、他の3つのセルの上部に保持します。まさにそれが必要なものです。
• 製品名の上に何も表示されないように、最初のthを隠すことで変更を加えます。

ここでデモを表示できます。

明らかに、ソリューションの有効性は、サポートの程度にのみ依存します。 Caniuse.comによると、FlexBoxはほとんどの最新のバリエーションに対して80％以上のサポートを提供しており、プレフィックスを必要とするブラウザの以前のバージョンを含める場合、93％以上が93％を超えています。 IEサポートはIE10（2012 Syntaxのみ）で始まりますが、IE11はそれを完全にサポートしています。主に小さな畫面でのサポートに焦點を當てているため、以前のIEバージョンのサポートの欠如を無視できます。モバイル面では、サポートはAndroid 4.4およびiOS 7.1から始まります。以前のバージョンにはベンダーのプレフィックスが必要であり、ラップ機能をサポートしませんでした。

また、ブートストラップで使用されるスクロールDIVなどのフォールバックオプションも提供する必要があります。これにより、サポート以外の訪問者にはまだ別のディスプレイの代替品があります。

スキーム2：追加のマーキングアリアの役割

サポートしたいほとんどのブラウザがF(xiàn)lexBoxをサポートしていない場合、代替手段があります。実際、これは2013年の実際のプロジェクトで使用したソリューションです。追加のタグが必要です。追加の行を追加し、関數(shù)名をコピーする必要があります。手動操作は退屈に見えることがありますが、データソースから情報を読むと、自動的に実行できます。最後に、最初の例のコードは次のようになります：

cssも非常に単純です：

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

アクセシビリティを改善するために、さらに一歩進んで、Aria-Hidden = "True"を使用して、スクリーンリーダーから追加のマーカーを非表示にすることができます。これにより、Aria-Hiddenの仕様を尊重する畫面リーダーアプリケーションでは、複製コンテンツを2回読み取っていません。

<table>
  <thead>
    <tr>
      <th></th>
      <th>產(chǎn)品 1</th>
      <th>產(chǎn)品 2</th>
      <th>產(chǎn)品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 1</td>
    </tr>
    <tr>
      <td>功能 1</td>
      <td>?</td>
      <td>?</td>
      <td>?</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 2</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>?</td>
      <td>?</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 3</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>?</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 4</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>?</td>
    </tr>
  </tbody>
</table>

これは、2番目のソリューションのデモです。

結(jié)論

比較テーブルを本當に反応させる2つの方法を見つけました。どちらにも利點と短所があります。最終的に、選択は視聴者に依存するはずです。ほとんどの場合、最初のオプション（フォールバックプランを使用）で十分です。 AndroidおよびiOSの古いバージョンに本當に対応する必要がある場合は、2番目のオプションを展開できます。いずれにせよ、機能の比較テーブルは、畫面のサイズに関係なく、これからずっと良く見えます。

（元のドキュメントのFAQパーツはここでは省略されています。この部分の內(nèi)容は擬似オリジナルの目標と一致せず、長すぎます。必要に応じて、FAQパーツの擬似原産性を処理できます別々に。）

以上が機能比較テーブルのレスポンシブソリューションの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。