エクセルの「ウィンドウ枠固定」のような表をHTMLでつくる


WEBシステムを構築する場合に、ユーザビリティを考慮したユーザーインターフェースを検討する場合の参考情報です。

特に業務系のWEBシステムでは、データを検索して一覧表示する画面を多様することは多いと思ます。

簡単にやるなら、検索結果をHTMLのtableタグでレンダリングして表示すればよいのですが、表の列や行が非常に多い場合はブラウザのスクロールバーでスクロールして見せたとしても、列や行の見出しタイトルもスクロールされてしまって、現在どのデータを見ているか分かりにくい時もあります。

特にエクセルの使い方に慣れている方だと、

「エクセルのように『ウィンドウ枠の固定』みたいにできないの?」

という要望をいただくことも少なくありません。

そこで、表の列、表の行、表の中身(行列)をそれぞれ別のtableタグでレンダリングして、javascriptのscrollイベント処理でエクセルのウィンドウ枠の固定のような動きをHTMLで作成するサンプルです。

行1
行2
行3
行4
行5
行6
行7
行8
行9
行10
行11
行12
行13
行14
行15
行16
行17
行18
行19
行20
行21
行22
行23
行24
行25
行26
行27
行28
行29
行30

列A
列B
列C
列D
列E
列F
列G
列H
列I
列J
列K
列L
列M
列N
列O
列P
列Q
列R
列S
列T
列U
列V
列W
列X
列Y
列Z

1A
1B
1C
1D
1E
1F
1G
1H
1I
1J
1K
1L
1M
1N
1O
1P
1Q
1R
1S
1T
1U
1V
1W
1X
1Y
1Z
2A
2B
2C
2D
2E
2F
2G
2H
2I
2J
2K
2L
2M
2N
2O
2P
2Q
2R
2S
2T
2U
2V
2W
2X
2Y
2Z
3A
3B
3C
3D
3E
3F
3G
3H
3I
3J
3K
3L
3M
3N
3O
3P
3Q
3R
3S
3T
3U
3V
3W
3X
3Y
3Z
4A
4B
4C
4D
4E
4F
4G
4H
4I
4J
4K
4L
4M
4N
4O
4P
4Q
4R
4S
4T
4U
4V
4W
4X
4Y
4Z
5A
5B
5C
5D
5E
5F
5G
5H
5I
5J
5K
5L
5M
5N
5O
5P
5Q
5R
5S
5T
5U
5V
5W
5X
5Y
5Z
6A
6B
6C
6D
6E
6F
6G
6H
6I
6J
6K
6L
6M
6N
6O
6P
6Q
6R
6S
6T
6U
6V
6W
6X
6Y
6Z
7A
7B
7C
7D
7E
7F
7G
7H
7I
7J
7K
7L
7M
7N
7O
7P
7Q
7R
7S
7T
7U
7V
7W
7X
7Y
7Z
8A
8B
8C
8D
8E
8F
8G
8H
8I
8J
8K
8L
8M
8N
8O
8P
8Q
8R
8S
8T
8U
8V
8W
8X
8Y
8Z
9A
9B
9C
9D
9E
9F
9G
9H
9I
9J
9K
9L
9M
9N
9O
9P
9Q
9R
9S
9T
9U
9V
9W
9X
9Y
9Z
10A
10B
10C
10D
10E
10F
10G
10H
10I
10J
10K
10L
10M
10N
10O
10P
10Q
10R
10S
10T
10U
10V
10W
10X
10Y
10Z
11A
11B
11C
11D
11E
11F
11G
11H
11I
11J
11K
11L
11M
11N
11O
11P
11Q
11R
11S
11T
11U
11V
11W
11X
11Y
11Z
12A
12B
12C
12D
12E
12F
12G
12H
12I
12J
12K
12L
12M
12N
12O
12P
12Q
12R
12S
12T
12U
12V
12W
12X
12Y
12Z
13A
13B
13C
13D
13E
13F
13G
13H
13I
13J
13K
13L
13M
13N
13O
13P
13Q
13R
13S
13T
13U
13V
13W
13X
13Y
13Z
14A
14B
14C
14D
14E
14F
14G
14H
14I
14J
14K
14L
14M
14N
14O
14P
14Q
14R
14S
14T
14U
14V
14W
14X
14Y
14Z
15A
15B
15C
15D
15E
15F
15G
15H
15I
15J
15K
15L
15M
15N
15O
15P
15Q
15R
15S
15T
15U
15V
15W
15X
15Y
15Z
16A
16B
16C
16D
16E
16F
16G
16H
16I
16J
16K
16L
16M
16N
16O
16P
16Q
16R
16S
16T
16U
16V
16W
16X
16Y
16Z
17A
17B
17C
17D
17E
17F
17G
17H
17I
17J
17K
17L
17M
17N
17O
17P
17Q
17R
17S
17T
17U
17V
17W
17X
17Y
17Z
18A
18B
18C
18D
18E
18F
18G
18H
18I
18J
18K
18L
18M
18N
18O
18P
18Q
18R
18S
18T
18U
18V
18W
18X
18Y
18Z
19A
19B
19C
19D
19E
19F
19G
19H
19I
19J
19K
19L
19M
19N
19O
19P
19Q
19R
19S
19T
19U
19V
19W
19X
19Y
19Z
20A
20B
20C
20D
20E
20F
20G
20H
20I
20J
20K
20L
20M
20N
20O
20P
20Q
20R
20S
20T
20U
20V
20W
20X
20Y
20Z
21A
21B
21C
21D
21E
21F
21G
21H
21I
21J
21K
21L
21M
21N
21O
21P
21Q
21R
21S
21T
21U
21V
21W
21X
21Y
21Z
22A
22B
22C
22D
22E
22F
22G
22H
22I
22J
22K
22L
22M
22N
22O
22P
22Q
22R
22S
22T
22U
22V
22W
22X
22Y
22Z
23A
23B
23C
23D
23E
23F
23G
23H
23I
23J
23K
23L
23M
23N
23O
23P
23Q
23R
23S
23T
23U
23V
23W
23X
23Y
23Z
24A
24B
24C
24D
24E
24F
24G
24H
24I
24J
24K
24L
24M
24N
24O
24P
24Q
24R
24S
24T
24U
24V
24W
24X
24Y
24Z
25A
25B
25C
25D
25E
25F
25G
25H
25I
25J
25K
25L
25M
25N
25O
25P
25Q
25R
25S
25T
25U
25V
25W
25X
25Y
25Z
26A
26B
26C
26D
26E
26F
26G
26H
26I
26J
26K
26L
26M
26N
26O
26P
26Q
26R
26S
26T
26U
26V
26W
26X
26Y
26Z
27A
27B
27C
27D
27E
27F
27G
27H
27I
27J
27K
27L
27M
27N
27O
27P
27Q
27R
27S
27T
27U
27V
27W
27X
27Y
27Z
28A
28B
28C
28D
28E
28F
28G
28H
28I
28J
28K
28L
28M
28N
28O
28P
28Q
28R
28S
28T
28U
28V
28W
28X
28Y
28Z
29A
29B
29C
29D
29E
29F
29G
29H
29I
29J
29K
29L
29M
29N
29O
29P
29Q
29R
29S
29T
29U
29V
29W
29X
29Y
29Z
30A
30B
30C
30D
30E
30F
30G
30H
30I
30J
30K
30L
30M
30N
30O
30P
30Q
30R
30S
30T
30U
30V
30W
30X
30Y
30Z

タグ: ,
カテゴリー: WEB

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

はてなブックマーク人気エントリー
カテゴリー