あくまで、ねらい通りにレイアウトすることを目標としたので、他の必要なコードが消えているかもしれません。参考として利用してください。(JavaScript側はconst addTask = (task,id) => {}
の中しか触っていないはずなので、消えていてもこの中だけだと思います。。HTML側はテーブルに関するところしか触っていないはずです)
GIFでは4つのデータを表示したいようですが、これでは3つのデータを表示したいように受け取れます。
しかも<tr>
の中に直接文字を打ち込んでいるのでこれでは何も機能しません。
下記のように修正しています。
<thead>
<th>ID</th>
<th>コメント</th>
<th>状態</th>
<th>削除ボタン</th>
</thead>
修正後の見た目
削除HTMLの解説のところで記載しましたとおり、削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。