著者について

Chen Hui Jing は独学のデザイナーおよび開発者で CSS への異常な愛を持っています。 ウェブプロジェクトでコードの行数を減らすことは、彼女を非常に幸福にする。 彼女は…More about恵京↬

• 11 min read

CSS,JavaScript,Design Patterns,Responsive Web Design

• Saved for offline reading
• Share on Twitter, LinkedIn

テーブルは大量のデータを行と列で表示するためのデザインパターンであり、カテゴリカルな対象に対して比較分析を行う際に効率的なものになります。 表は、2 世紀にはすでにこの目的に使用されており、世界がデジタル化し始めたとき、表も私たちと一緒にやってきました。

Web が表形式でのデータの表示をサポートすることは必然的でした。 HTML テーブルは、意味的にも構造的にも適切な方法で表形式データを表示します。 しかし、HTML テーブルのデフォルト スタイルは、これまで見た中で最も美的感覚に優れたものではありません。 望ましい視覚的デザインによっては、これらのテーブルをきれいにするために、CSSの前線で何らかの努力が必要でした。 10 年前、「Top 10 CSS Table Designs」という記事が Smashing Magazine に掲載され、現在でも多くのトラフィックを獲得し続けています。

Web は過去 10 年間で大きく進化し、サイトやアプリケーションを閲覧されるビューポートに適応させることが以前よりも便利になっています。 とはいえ、アクセシビリティで妥協しない、考慮されたデザインの選択をし続けなければなりません。 テーブルはすぐに人気を失うことはなさそうなので、2019 年の Web 上でテーブルをどのように作成できるかを見てみましょう。

CSS-Only Options

データセットがそれほど大きくなく、ページネーションやソートなどの機能が必要ない場合は、JavaScript フリーのオプションを検討してください。 残念ながら、アクセシビリティの面でいくつかの DOM 操作のための JavaScript の助けがなければ、CSS 専用のオプションはほんの一握りしかありません。 しかし、小規模なデータ セットでは、多くの場合、それで十分です。

Option 1: Do Nothing

まず、労力の少ないシナリオから始めます。 データが、わずかな列と多くの行からなるテーブルに収まる場合、そのようなテーブルは、最初からかなりモバイル対応されています。

問題はおそらく広い画面での余分なスペースを持つことですので、max-width でテーブルの最大幅に「上限」を設け、狭い画面で必要に応じて縮小できるようにするとよいかもしれません。

See the Pen Table #1: Few columns, many rows by (Chen Hui Jing) on CodePen.

この種のパターンはデータ自体がテキストの行や列ではない場合最適に機能するものです。 2712>

Option 2: Style The Scroll

David Bushell は、2012 年にレスポンシブ テーブルに関する彼のテクニックを書きましたが、これはオーバーフローを呼び出し、ユーザーがスクロールしてさらにデータを見ることができるようにするものでした。 しかし、技術的には、コンテナーはビューポートの幅に対応しています。

まず、「基本的な」オーバーフローを見てみましょう。 Basic の周りに空気引用符を使っているのを想像してください。なぜなら、スクロールする影のスタイリングはそれ以外のものだからです。 それでも、この例では、「基本」 はテーブルが何も変形しないことを意味します。

CodePen 上の Chen Hui Jing による Pen Table #3: Style the scroll (basic) を参照してください。

スクロールする影を作るこのテクニックは Roma Komarov と Lea Verou が互いのアイデアを駆使して魔法を作り出したものです。 これは、含む要素の背景画像として複数のグラデーション (線形および放射状) を使用し、background-attachment: local を使用して背景をそのコンテンツに対して相対的に配置することに依存しています。

別のスクロール オプションは、テーブル ヘッダーを行構成から列構成に反転し、<tbody> 要素のコンテンツに水平スクロールを適用することです。 このテクニックは Flexbox の動作を利用して、テーブルの行を列に変換します。

CodePen 上の Chen Hui Jing による Pen Table #3: Style the scroll (flipped headers) をご覧ください。

テーブルに display: flex を適用すると、<thead> と <tbody> は両方とも flex child になり、デフォルトでは同じ flex line に隣り合って配置されます。

また、<tbody> 要素を flex container にして、その中のすべての <tr> 要素も 1 つの flex line に配置された flex child にしています。 最後に、すべてのテーブル セルの表示を、デフォルトの table-cell ではなく block に設定する必要があります。

この手法の利点は、ヘッダーが常に表示され、固定ヘッダー効果のように、ユーザーがデータの列をスクロールしても文脈が失われないことです。

Sprinkle On Some JavaScript

先に述べたように、display 値を変更することによりテーブルをモーフィングするレイアウト オプションは、時にアクセシビリティに対してネガティブな影響を及ぼし、修正するためにいくつかの小さな DOM 操作を必要とします。

さらに、ページネーション、ソート、フィルタリングなどの機能 (有効にするにはいくつかの JavaScript を必要とする機能) を含む、データ テーブルを設計する際のユーザー エクスペリエンスのヒントが Andrew Coyle から数多く提供されています。

比較的単純なデータ セットで作業している場合、おそらくこれらの機能のいくつかについて独自の関数を書きたいと思うでしょう。

Rows To Blocks, With Accessibility Fix

私が知る限り、このレスポンシブ データ テーブルの手法は、2011 年に Chris Coyier が CSS-Tricks で「レスポンシブ データ テーブル」という記事を書いて以来、その存在が知られています。 このテクニックの要点は、メディア クエリを使用して、狭いビューポートで table 要素とその子の display プロパティを block に切り替えることです。

狭い画面では、テーブル ヘッダーは視覚的に隠されますが、アクセス可能ツリーにまだ存在します。 テーブルのセルにデータ属性を適用することで、CSS を介してデータのラベルを表示し、ラベルの内容を HTML に保持することができます。 マークアップとスタイルがどのように見えるかについては、以下の CodePen を参照してください。

See the Pen Table #2: Rows to blocks by Chen Hui Jing on CodePen.

元の方法は、ラベルテキストを表示する擬似要素に幅を適用しますが、それはラベルが最初に必要とするスペースの量を知っている必要があることを意味します。 上記の例では、ラベルとデータがそれぞれ含むブロックの反対側にある、少し異なるアプローチを使用しています。

Flex Formatting コンテキストで自動余白を使用して、このような効果を得ることができます。 各 <td> 要素の display プロパティを flex に設定すると、疑似要素は元の要素の直接の子であるかのようにボックスを生成するので、<td> の flex 子になります。

その後、疑似要素に margin-right: auto を設定してセルのコンテンツをセルの遠端に押し出すことが問題になります。 サポートするブラウザでの display: contents は、現時点ではアクセシビリティに問題があるため、バグが修正されるまではこの方法を実運用で使用しないように注意してください。

See the Pen Table #2: Rows to blocks (alt) by Chen Hui Jing on CodePen.

Each <tr> element is set to display: grid, and each <td> element is set to display: contents.This is a alternative layout option on CodePen. グリッドコンテナの直接の子だけがグリッドフォーマットコンテキストに参加します。この場合、それは<td>要素です。

display: contentsが<td>に適用されると、それはその内容によって「置き換え」られ、この場合、<td>内の疑似要素と<span>が代わりにグリッドの子となります。

このアプローチで気に入っているのは、max-content を使用して擬似要素の列のサイズを設定できることで、列が常に最長のラベルの幅になることを保証し、そのために幅の値を手動で割り当てる必要がない点です。

将来、min-content、max-content、fit-content（CSS Intrinsic & Extrinsic Sizing Module Level 3 でカバー）のサイジング値が一般的な width および height 値としてサポートされると、レイアウトの選択肢がさらに増えることになります。

このアプローチの欠点は、テーブル セルのコンテンツに <span> または <p> がない場合、その追加要素が必要であり、そうでなければスタイルを適用する方法がないことです。

シンプルなページ処理

この例は、Gjore Milevski がこの CodePen から div ではなくテーブル行でページ処理を行うよう修正した基本的なページ処理の実装を示すものです。

See the Pen Table #4: Simple pagination by Chen Hui Jing on CodePen.

レイアウトの観点から、ページ処理要素の配置に Flexbox は非常に役に立ち、さまざまなビューポート サイズで利用可能です。 プロジェクトのデザインによって要件は異なりますが、Flexbox の多用途性により、これらの違いに適宜対応できます。

この場合、ページ送りはページの中央で、テーブルの上に配置されています。 前後への移動のためのコントロールは、広い画面ではページ インジケーターの両側に配置されますが、狭い画面では 4 つすべてがページ インジケーターの上に表示されます。

これは、order プロパティを平準化することによって実現できます。 このプロパティはソースの順序を変更しないので、コンテンツの視覚的な並べ替えは常に考慮して行う必要があります。

Simple Sorting

この例では、テキストと数字の両方を扱うために Peter Noble によるこのコード スニペットを修正した基本的な並べ替え実装を示します。

どの列が現在どの順序でソートされているか、何らかの指標があると便利でしょう。 これは、CSS クラスを追加することで実現でき、好きなようにスタイルを変更できます。 この場合、インジケータ記号は、ターゲット ヘッダーがクリックされたときにトグルされる擬似要素です。

シンプルな検索

この例は、各テーブル セルのすべてのテキスト コンテンツを反復して、検索入力フィールドに一致しないすべての行を隠すために CSS クラスを適用する、基本的なフィルタリング機能です。

CodePen の Pen Table #6: Simple filtering by Chen Hui Jing を参照してください。

こうした実装は比較的単純で、使用事例がそれを必要とする場合、代わりに列ごとに検索することが理にかなっている場合があります。 そのシナリオでは、各入力フィールドをそれぞれの列でテーブルの一部として持つことが良いアイデアかもしれません。

Let A Library Handle It

The above JavaScript snippets serve to demonstrate how tables with larger amounts of data can be enhanced to make life for those tables easier to the users of. しかし、本当に大きなデータセットでは、大きなテーブルを管理するために既存のライブラリを使用することが理にかなっているかもしれません。

The column toggle pattern is one by which non-essential columns are hidden on smaller screens. 通常、ビューポートが狭いという理由だけでコンテンツを隠すことは好きではありませんが、Filament Group の Maggie Costello Wachs によるこのアプローチでは、ユーザーが隠れた列を表示するように切り替えることができるドロップダウン メニューを提供することにより、私のその不満を解決しています。

上記の記事は 2011 年に公開されましたが、Filament Group はその後、ソート、行選択、国際化などの機能を含む、Tablesaw として知られるレスポンシブ テーブル プラグインの完全なスイートを開発しました。 Tablesaw は、現時点で jQuery に依存していない、私が見つけた唯一のライブラリの 1 つです。

まとめ

世の中には無数のテーブル設計パターンがあり、どのアプローチを選ぶかは、データの種類とそのデータの対象者に大きく依存します。 結局のところ、テーブルはデータを整理して表示するための方法です。 ユーザーにとって最も重要な情報は何かを考え、そのニーズに最も適した方法を選択することが重要です。

Further Reading

• “CSS-Only Responsive Tables,” David Bushell
• “Accessible, Simple, Responsive Tables,” Davide Rizzo, CSS-Tricks
• “Responsive Table Layout,” Matt Smith
• “Responsive Patterns,” David Rizzo
• “Responsive Table” David Bushell
• “Responsive Table,” David Rizzo, CSS-Tricks
• “Hey, It’s Still OK To Use Tables,” Adrian Roselli
• “Tables, CSS Display Properties, And ARIA,” Adrian Roselli
• “Data Tables,” Heydon Pickering

…