TablesNG は Chromium 91 でリリースされ、長年ウェブ プラットフォームにあった多くのバグが修正されています。これらのアップデートにより、#Compat2021 の取り組みの一環としてブラウザの互換性が向上し、ウェブ プラットフォーム全体でテーブルの使用が改善されます。主な問題には、行の position:
sticky、サブピクセル ジオメトリ、適切な枠線の折りたたみなどがあります。
TablesNG の取り組み
TablesNG は、Chrome デベロッパー Aleks Totic が主導する数年にわたる取り組みで、ウェブ上でのテーブルのレンダリング方法を完全に再構築しています。テーブルは、ウェブ開発において特に摩擦を生む領域です。その背景には、テーブルの履歴があります。
表は 1994 年に HTML に追加され、長年にわたり複雑なページ レイアウトを作成するための主な方法として使用されました。今でもウェブで見られますが、最近では表形式データの表示が一般的です。ただし、ブラウザによってテーブルの動作には大きな違いがあります。その多くは、テーブルの仕様が不完全で詳細が不十分なために生じています。多くの CSS 機能（直交書き込みモード、position:relative、box-sizing、Flexbox コンテナなど）以前は、テーブルにテーブルも実装されていました。そのため、これらの機能の多くはサポートに一貫性がありませんでした。
新しい仕様である CSS Table Module Level 3 は、2018 年に Edge がテーブルを再実装した後に記述されました。TablesNG は、この新しい仕様に従うだけでなく、その過程でテーブルの多くの不整合を修正することを目的とした再設計の取り組みです。主な変更点は次のとおりです
- スクロールする長いテーブルの行に固定配置を有効にします。
- サブピクセル ジオメトリと表境界の位置揃えを修正しました。
- 背景と境界のペイントを改善しました。
行内: position: sticky
過去のテーブルのスタイル設定に関して最も要望があり、最も不満に感じた点の一つは、行で position: sticky がサポートされていなかったことでした。この機能により、スクロールしても表のヘッダーがページに残り、長いデータテーブルにコンテキストを与えることができます。ヘッダーをスクロールして数字でいっぱいの表を表示すると、その数字の意味を忘れがちです。
position: sticky が <thead> に適用されているにもかかわらず、テーブルのヘッダーが固定位置に残っていません。このバグが長期間続いているのは、position: sticky が HTML テーブルが登場してから十分に指定されていたためです。この修正以前は、目的の position: sticky を含むヘッダーは position: static に変換されていましたが、現在はテーブル内の任意の場所（ヘッダー（<thead>）または縦軸のラベル）で position: sticky を使用できるようになりました。
枠線の描画と背景の描画の改善
最も古いテーブル bugsの 1 つは、2008 年 9 月までさかのぼります。この問題は Chrome がリリースされるとほぼ同時に報告され、古いテーブル アーキテクチャが原因で修正できませんでした。この問題は、テーブルのペイントと境界の折りたたみに関するものです。
テーブルがペイントされる方法は、z-index の順で、セル > 行 > セクション > テーブルです。その後、DOM（ドキュメント オブジェクト モデル）に出現する順序でペイントされます。ただし、セル自体は逆の DOM 順序であり、テーブルの最初のセルが一番上になります。
したがって、テーブルが描画されていた従来の方法では、境界がセルではなくテーブルに属していることが問題になります。テーブルが前景をペイントすると、折りたたまれた境界もペイントされます。つまり、1 つのテーブルセルに複数の枠線を設定することはできません。
上記の例では、左端の青いセルが、複数の境界線を持つことができないため、右下のオレンジ色のセルの上に誤ってペイントされています。再設計した実装ではこの問題は解決され、オレンジ色の境界セルが青色の境界セルの上に正しく描画され、2 番目のテーブルのギャップに青色とオレンジ色の両方の境界線が表示されます。
このバグは Chromium と Firefox で修正されています。
サブピクセル ジオメトリ（テーブルの配置）
テーブル内のピクセル アライメントは、別の相互運用性の問題であり、これが TablesNG で修正されています。以前は、古いエンジンではグラフィック値が常にピクセルに丸められていました。つまり、ページをズームインまたはズームアウトすると、物事がシフトし、配置の問題が生じていました。TablesNG では、これらのアライメントに関する問題が修正されています。
ウェブの再構築
Chrome チームは、ウェブ オーサリングの堅牢性を高めるための新機能を導入しているだけでなく、既存の API とその互換性の改善にも取り組んでいます。実際、TablesNG は、このチームが過去 8 年間にわたって取り組んでいる多くの再設計プロジェクトの 1 つにすぎません。他にも次のようなプロジェクトがあります（すべてではありません）。
- LayoutNG: すべてのレイアウト アルゴリズムを根本から書き換えたもので、信頼性が大幅に向上し、パフォーマンスの予測可能性が向上しています。
- BlinkNG: Blink レンダリング エンジンを体系的にクリーンアップして、明確に分離されたパイプライン フェーズにリファクタリングします。これにより、キャッシュ保存が向上し、信頼性が向上し、content-visibility やコンテナクエリなどの再入 / 遅延レンダリング機能を利用できます。
- GPU Raster Everywhere: 可能な限りすべてのプラットフォームで GPU のラスタライズを展開する長期的な取り組み。
- スレッド形式のスクロールとアニメーション: すべてのスクロール アニメーションとレイアウトに影響を与えないアニメーションをコンポジタ スレッドに移動するための長期的な取り組み。
これらの改善などに関する最新情報にもご注目ください。