FixedMidashiのデモページ

以下のCSSを指定したdivでtableを囲っています。

    
      width: 300px;
      height: 100px;
      overflow: auto;
      white-space: nowrap;
    
  

通常のテーブル

あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめ☆もがちょ やゆよ らりるれろ わをん
行1 1-1 1-2 1-3 1-4 1-5 1-6 1-7 1-8 1-9
行2 2-1 2-2 2-3 2-4 2-5 2-6 2-7 2-8 2-9
行3 3-1 3-2 3-3 3-4 3-5 3-6 3-7 3-8 3-9
行4 4-1 4-2 4-3 4-4 4-5 4-6 4-7 4-8 4-9
行5 5-1 5-2 5-3 5-4 5-5 5-6 5-7 5-8 5-9
行6 6-1 6-2 6-3 6-4 6-5 6-6 6-7 6-8 6-9
行7 7-1 7-2 7-3 7-4 7-5 7-6 7-7 7-8 7-9
行8 8-1 8-2 8-3 8-4 8-5 8-6 8-7 8-8 8-9
行9 9-1 9-2 9-3 9-4 9-5 9-6 9-7 9-8 9-9

FixedMidashiを利用

列と行を1つずつ固定、固定時に赤いダッシュ線を表示するようにオプションで指定しています。

アイエエエエ! カワイイヤッター! サヨナラ! タツジン! ナムアミダブツ! ハイクを詠め マッポーめいた ヤメロー! 落第忍者 ワザマエ!
行1 1-1 1-2 1-3 1-4 1-5 1-6 1-7 1-8 1-9
行2 2-1 2-2 2-3 2-4 2-5 2-6 2-7 2-8 2-9
行3 3-1 3-2 3-3 3-4 3-5 3-6 3-7 3-8 3-9
行4 4-1 4-2 4-3 4-4 4-5 4-6 4-7 4-8 4-9
行5 5-1 5-2 5-3 5-4 5-5 5-6 5-7 5-8 5-9
行6 6-1 6-2 6-3 6-4 6-5 6-6 6-7 6-8 6-9
行7 7-1 7-2 7-3 7-4 7-5 7-6 7-7 7-8 7-9
行8 8-1 8-2 8-3 8-4 8-5 8-6 8-7 8-8 8-9
行9 9-1 9-2 9-3 9-4 9-5 9-6 9-7 9-8 9-9