テーブルの列や行をposition: sticky;で固定してスクロールする方法【CSS】
また、 position: sticky; でスクロールさせた際に、親要素の border も一緒にスクロールされてチラついて見える為、疑似要素 ::before を被せています。 ※リセットCSS等で疑似要素に box-sizing: border-box; が指定されている場合は content-box を指定するか、 width や height の値を calc(100% + 2px) にしてください。
列(縦)を固定してスクロールする
内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 table < width: 150%; >td,th < padding: 25px 20px; border: 1px solid #E4E4E4; >th < color: #FFF; background-color: #202124; >.sticky < position: sticky; left: 0; >.sticky::before 見出し 内容 内容 内容 内容 内容 見出し 内容 内容 内容 内容 内容 見出し 内容 内容 内容 内容 内容上記例では、 一番左の列(縦)を固定するために position: sticky; を指定し、親要素を基準に上で固定する為に left: 0; を指定 しています。
行(横)の固定と同じく、 position: sticky; でスクロールさせた際に、親要素の border も一緒にスクロールされてチラついて見える為、疑似要素 ::before を被せています。 ※リセットCSS等で疑似要素に box-sizing: border-box; が指定されている場合は content-box を指定するか、 width や height の値を calc(100% + 2px) にしてください。