JavaScript サンプル: <table> の縦横スクロール

<table> のヘッダを固定して縦横スクロールを実現します。

.table-scroll の <table> を <div> で囲い、ヘッダ用に<table> を複製する処理をしているため、DOM 構造が変化します。
複雑な構造の <table> には対応していません (未検証)

社員番号	名字	名前	性別	生年月日	部署	備考
000001	山田	太郎	男	9999/12/31	開発部	123456789012345678901234567890
000002	鈴木	次郎	男	9999/12/31	開発部	123456789012345678901234567890
000003	事務	三郎	男	9999/12/31	事務管理部	123456789012345678901234567890
000004	企画	四郎	男	9999/12/31	経営企画部	123456789012345678901234567890
000005	人事	五郎	男	9999/12/31	人事部	123456789012345678901234567890
000001	山田	太郎	男	9999/12/31	開発部	123456789012345678901234567890
000002	鈴木	次郎	男	9999/12/31	開発部	123456789012345678901234567890
000003	事務	三郎	男	9999/12/31	事務管理部	123456789012345678901234567890
000004	企画	四郎	男	9999/12/31	経営企画部	123456789012345678901234567890
000005	人事	五郎	男	9999/12/31	人事部	123456789012345678901234567890
000001	山田	太郎	男	9999/12/31	開発部	123456789012345678901234567890
000002	鈴木	次郎	男	9999/12/31	開発部	123456789012345678901234567890
000003	事務	三郎	男	9999/12/31	事務管理部	123456789012345678901234567890
000004	企画	四郎	男	9999/12/31	経営企画部	123456789012345678901234567890
000005	人事	五郎	男	9999/12/31	人事部	123456789012345678901234567890
000001	山田	太郎	男	9999/12/31	開発部	123456789012345678901234567890
000002	鈴木	次郎	男	9999/12/31	開発部	123456789012345678901234567890
000003	事務	三郎	男	9999/12/31	事務管理部	123456789012345678901234567890
000004	企画	四郎	男	9999/12/31	経営企画部	123456789012345678901234567890
000005	人事	五郎	男	9999/12/31	人事部	123456789012345678901234567890