CSSだけでテーブルの縦横２列を固定してスクロールできるようにする

※この記事ははてなブログ、別アカウント(hyiromori)から引っ越しました はじめに タイトルのような、とても大変な要件のテーブルを作って欲しいという要望があったので、その際に試行錯誤した結果を記録しておいたエントリです。 サンプル コードの解説 このコードではposition: stickyを使用することで、テーブルの行、列を固定しています。 position: sticky は top right bottom left と組み合わせて使うことで position: relative と position: absoluteを組み合わせたような動きが可能になる指定です。 Safari ではposition: -webkit-sticky;のようにベンダープレフィックスをつけないと動作しませんでした。 詳細はMDNの解説をご覧ください。 position: sticky の対応状況

[iww]

スクロールバーがヘッダ部分にかかってしまう