contenteditableで編集可能なテーブルを作る

概要

編集可能なテーブルを作る機会に恵まれました。
最初inputで作ろうかなと思ったけどhtml5にcontenteditableという、これをくっつけるだけで編集可能にできるというナイスな属性があるらしいのでこいつをtrueにします。
セル内をクリックするとカーソルが出て文字を書いたり消したりできるので試してみてください。
せっかくなのでrowpanを使ってセルをくっつけたりしています。

更新

2018-08-21 spanをdivにした。spanだとコンテンツを消すと二度と入力できなくなるので

編集可能な好きな勇者テーブル（ちなみにヘッダと順位は編集できない）

contenteditableのここがすごい

ドラッグドロップもしてくれる
改行とかも反映される
Ctrl+V、Ctrl+C、Ctrl+Z、Ctrl+I、Ctrl+B,Ctrl+Uが使える
backspaceとかで要素消せる（面白い）

(function(body){
	body.contentEditable = true;
})(document.body);

を開発者ツールとかで実行するとページ全体が編集できる（面白い）
（document.bodyが引数になっていてそれ全体のcontentEditable属性をtrueにしている）

javascript:(function(body){body.contentEditable=true;})(document.body);

をブックマックレットで実行するとスマホでもページ全体を編集できて面白い

contenteditableのここがだめ

改行でdiv生成したりしてタグが混じるのでちょっと怖い
エスケープとか無効化処理が面倒
htmlベースなので背景色のついたテーブルセルの文字をドラッグドロップすると文字が背景色ごとコピーされる
(divタグにスタイルとかでついてくる)

一応コード

<table class="border-table">
    <tbody>
        <tr class="bg-black">
            <th class="font-white bold center v-middle w5per">順位</th>
            <th class="font-white bold center v-middle w20per">特徴</th>
            <th class="font-white bold center v-middle w30per">メイン勇者<br>サブ勇者</th>
            <th class="font-white bold center v-middle">コメント</th>
        </tr>
 
        <tr class=" bg-dark">
            <td rowspan="2" class="center v-middle">1</td>
            <td rowspan="2" class="center v-middle"><div class="" contenteditable="true">最高に可愛い</div></td>
            <td><div class="" contenteditable="true">冬服ぐんちゃん（青）</div></td>
            <td rowspan="2" class="v-middle"><div class="" contenteditable="true">高嶋さんが6段で自然回復ついてて近接範囲で前線においといてドロップ回復アイテム回収できるし、ぐんちゃんの必殺技で他の子回復させられるのが楽しい</div></td>
        </tr>
        <tr class=" bg-dark">
            <td><div class="sqlp-page-url" contenteditable="true">勇者高嶋（黄）</div></td>
        </tr>
         
 
        <tr class=" bg-dark">
            <td rowspan="2" class="center v-middle">2</td>
            <td rowspan="2" class="center v-middle"><div class="" contenteditable="true">フレンドでよく使う</div></td>
            <td><div class="" contenteditable="true">勇者杏（黄色）</div></td>
            <td rowspan="2" class="v-middle"><div class="" contenteditable="true">
            勝手にワザリング・ハイツ先輩って呼んでる(名称に特に意味はない)。遠射遠射で使いやすいし全体攻撃だし全体攻撃だし全体攻撃だしたまっち先輩体力高いしという感じ、メインたまっち先輩のこともある、ワザリング・ハイツ使わなければ攻撃ペースアップのおかげで唯置いておくだけでも強い
            </div></td>
        </tr>
        <tr class=" bg-dark">
            <td><div class="sqlp-page-url" contenteditable="true">キャンプたまっち先輩（緑）</div></td>
        </tr>
         
        <tr class=" bg-dark">
            <td rowspan="2" class="center v-middle">3</td>
            <td rowspan="2" class="center v-middle"><div class="" contenteditable="true">どうしようもないときに使う</div></td>
            <td><div class="" contenteditable="true">艶麗東郷さん（紫）</div></td>
            <td rowspan="2" class="v-middle"><div class="" contenteditable="true">体力に難があるけどやっぱり全体攻撃は強い、あんたまとセットで後衛に置くとクリアリミットが妙に短いステージもなんとかクリアできる…、結束なら攻撃ペースアップついてくるし、フレンドやサブを勇者若葉ちゃん(青)にして必殺技ゲージためることもある</div></td>
        </tr>
        <tr class=" bg-dark">
            <td><div class="sqlp-page-url" contenteditable="true">結束わっしー（青）</div></td>
        </tr>
         
        
    </tbody>
</table>

テーブル作るついでに作ったレイアウト用css

/* 右揃え */
.right{
	text-align: right;
}
/* 中央揃え */
.center{
	text-align: center;
}
/* 縦揃え */
.v-middle{
	display: table-cell;
	vertical-align: middle;
}
/* 太字 */
.bold{
	font-weight: bold;
}
/* 白文字 */
.font-white{
	color: #FFFFFF;
}
/* 背景黒 */
.bg-black{
	background-color: #000000;
}
/* 背景灰色 */
.bg-dark{
	background-color: #E9E4E9;
}
/* ヘッダ部分につけて幅を変更する */
.w5per{
	width: 5%;
}
.w10per{
	width: 10%;
}
.w15per{
	width: 15%;
}
.w20per{
	width: 20%;
}
.w30per{
	width: 30%;
}
.w100per{
	width: 100%;
}
/* 枠線を細い線にする */
.border-table,
.table.border-table tr,
.table.border-table th,
.border-table td
{
	border: 1px solid #000;
	border-collapse: collapse;
}