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

HTMLではcontentEditable属性でコンテンツを編集可能にする機能があり、これを使うことで↓この動画のようにExcelのようなテーブルを作ることができます。

 

 

TDタグにcontenteditable=trueを追加すればOKです。

<table>
<tr class="header">
  <th class="item1"> </th>
  <th class="item2">A</th>
  <th class="item2">B</th>
  <th class="item2">C</th>
  <th class="item2">D</th>
  <th class="item2">E</th>
</tr>
<tr>
  <td class="item1">1</td>
  <td class="value1" id="A1" contenteditable=true></td>
  <td class="value1" id="A2" contenteditable=true></td>
  <td class="value1" id="A3" contenteditable=true></td>
  <td class="value1" id="A4" contenteditable=true></td>
  <td class="value1" id="A5" contenteditable=true></td>
</tr>
<tr>
  <td class="item1">2</td>
  <td class="value1" id="B1" contenteditable=true></td>
  <td class="value1" id="B2" contenteditable=true></td>
  <td class="value1" id="B3" contenteditable=true></td>
  <td class="value1" id="B4" contenteditable=true></td>
  <td class="value1" id="B5" contenteditable=true></td>
</tr>
</table>
 

 

外観をExcel風にするためのCSS。

table {
  border-collapse: collapse;
}
.item1 {
  border: 1px solid grey;
  padding: 3px 10px;
  background: #ddd;
  text-align: center;
  width: 50px;
}
.item2 {
  border: 1px solid grey;
  padding: 3px 10px;
  background: #ddd;
  width: 100px;
}
.value1 {
  border: 1px solid grey;
  padding: 3px 10px;
  cursor: pointer;
}
 

 

 

 - HTML/JavaScript