HTML contenteditable = true混乱/予期せずテーブル行構造を変更します

編集ボタンをクリックし、電子メール列の内容を編集しようとします.HTMLテーブル構造が変わっています。HTML contenteditable = true混乱/予期せずテーブル行構造を変更します

これは私のコードスニペットです：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<script> 
 
function deleteAction(){ 
 
\t $("#fname").attr('contenteditable','true'); 
 
\t $("#lname").attr('contenteditable','true'); 
 
\t $("#email").attr('contenteditable','true'); 
 
} 
 
</script> 
 
<body> 
 
<div class="container">    
 
    <table class="table table-bordered"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Email</th> 
 
\t \t <th>Delete</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fname">John</td> 
 
     <td id="lname">Doe</td> 
 
     <td id="email">[email protected]</td> 
 
\t \t <td><button class="btn btn-danger" id="delete" onclick="deleteAction()">Delete</button></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

このコードスニペットは、SOインラインコードスニペットランナーに適しています。しかし、下の図では、同じコードが異なって動作することがわかります。