サンプルページ | アクセシビリティに配慮したtableの列固定に挑戦してみた

アクセシビリティに配慮した1列目固定表示のtable

名前データAデータBデータCデータDデータEデータFデータGデータHデータIデータJ
名前01Aテキスト01Bテキスト01Cテキスト01Dテキスト01Eテキスト01Fテキスト01Gテキスト01Hテキスト01Iテキスト01Jテキスト01
名前02Aテキスト02Bテキスト02Cテキスト02Dテキスト02Eテキスト02Fテキスト02Gテキスト02Hテキスト02Iテキスト02Jテキスト02
名前03Aテキスト03Bテキスト03Cテキスト03Dテキスト03Eテキスト03Fテキスト03Gテキスト03Hテキスト03Iテキスト03Jテキスト03
名前04Aテキスト04Bテキスト04Cテキスト04Dテキスト04Eテキスト04Fテキスト04Gテキスト04Hテキスト04Iテキスト04Jテキスト04
名前05Aテキスト05Bテキスト05Cテキスト05Dテキスト05Eテキスト05Fテキスト05Gテキスト05Hテキスト05Iテキスト05Jテキスト05

参考)普通のtable(スクロールあり、列固定なし)

名前データAデータBデータCデータDデータEデータFデータGデータHデータIデータJ
名前01Aテキスト01Bテキスト01Cテキスト01Dテキスト01Eテキスト01Fテキスト01Gテキスト01Hテキスト01Iテキスト01Jテキスト01
名前02Aテキスト02Bテキスト02Cテキスト02Dテキスト02Eテキスト02Fテキスト02Gテキスト02Hテキスト02Iテキスト02Jテキスト02
名前03Aテキスト03Bテキスト03Cテキスト03Dテキスト03Eテキスト03Fテキスト03Gテキスト03Hテキスト03Iテキスト03Jテキスト03
名前04Aテキスト04Bテキスト04Cテキスト04Dテキスト04Eテキスト04Fテキスト04Gテキスト04Hテキスト04Iテキスト04Jテキスト04
名前05Aテキスト05Bテキスト05Cテキスト05Dテキスト05Eテキスト05Fテキスト05Gテキスト05Hテキスト05Iテキスト05Jテキスト05

参考)固定部分とスクロール部分を分割する方法で1列目を固定させたtable

名前
名前01
名前02
名前03
名前04
名前05
データAデータBデータCデータDデータEデータFデータGデータHデータIデータJ
Aテキスト01Bテキスト01Cテキスト01Dテキスト01Eテキスト01Fテキスト01Gテキスト01Hテキスト01Iテキスト01Jテキスト01
Aテキスト02Bテキスト02Cテキスト02Dテキスト02Eテキスト02Fテキスト02Gテキスト02Hテキスト02Iテキスト02Jテキスト02
Aテキスト03Bテキスト03Cテキスト03Dテキスト03Eテキスト03Fテキスト03Gテキスト03Hテキスト03Iテキスト03Jテキスト03
Aテキスト04Bテキスト04Cテキスト04Dテキスト04Eテキスト04Fテキスト04Gテキスト04Hテキスト04Iテキスト04Jテキスト04
Aテキスト05Bテキスト05Cテキスト05Dテキスト05Eテキスト05Fテキスト05Gテキスト05Hテキスト05Iテキスト05Jテキスト05