HTML+CSS+JavascriptでExcelのような入力テーブルを作った

以前、HTML/CSSだけでExcelのような入力できるテーブルを作りました。今回は少しバージョンアップさせてかなりExcelっぽい入力テーブルを作ったので紹介します。

非IT企業に勤める中年サラリーマンのIT日記

【HTML】CSSだけでExcelのような入力できるテーブルを作る方法（contentEditable属性）

HTMLではcontentEditable属性でコンテンツを編集可能にする機能があり、これを使うことで↓この動画のようにExcelのようなテーブルを作ることができます。  TDタグにcontenteditable=trueを追加すればOKです。 A B C D

これを作るにあたっては以下の記事に書いた技が含まれています。

• 【HTML/Javascript】TableをJavascriptで動的に生成する方法
• 【HTML/CSS】Tableのヘッダを固定してスクロールする方法
• 【HTML/Javascript】Tableをクリックした時に選択行の背景色を変える方法

外観はこんな感じです。縦横を少しスクロールさせた状態の外観ですが、１行目と１列目が固定化されていることがおわかりかと思います。

動画にもしてみたのでどのように動作するかご確認いただけたらと。

以下がソースコードです。CSS, Javascriptも含め１つのHTMLファイルにまとめています。

GitHubにもアップしておいた。

github.com

https://github.com/satoshi71/exceljs

 - HTML/JavaScript