Javascript 在不可编辑的td上单击时设置焦点并显示轮廓

我正在创建一个电子表格。有些单元格有时是不可编辑的。我仍然希望在单击不可编辑的单元格或在td上调用focus（）时，单元格周围显示蓝色轮廓。但当我将contentEditable设置为false时，当我单击单元格或调用focus（）时，它不会选择单元格

标题
标题
这可以成为焦点
这是不可能的

<table style="width:350px">
  <tr>
    <th>Title</th>
    <th>Title</th>
  </tr>
  <tr>
    <td>
      <div contenteditable="true">This can be in focus</div>
    </td>
    <td>
      <div id="id">This can not be in focus</div>
    </td>
  </tr>
</table>