display:table-cellはtd,th要素にデフォルトで設定されています。
tableのセル、行の表示を切り替える際のdisplayプロパティの設定値はデフォルトで設定してある値にするのが無難です。

背景 🖼️

td要素をデフォルトで非表示にして、条件によって表示非表示を切り変える実装をしていました。
その際、表示に切り替えるとスタイルずれが起こりました。

display:tableとは 💡

テーブルの行と列が適切にレイアウトするために使用されます。

ブラウザのデフォルトのスタイルシートでtable要素に指定されます。

tableのセルのスタイルを指定します

ブラウザのデフォルトのスタイルシートでtd要素,th要素に指定されます。

tableの行のスタイルを指定します

ブラウザのデフォルトのスタイルシートでtr要素に指定されます。

ブロック要素として扱われるため、常に新しい行から開始し幅全体を占有します。
ブロックレベル要素の前後に自動的に改行が挿入されます。

テーブル内での正しい表示と機能を維持するためにはtd,th要素でデフォルトのdisplay:table-cellを使用すべきでしたが、display:blockを使用した為です。

以下が修正後のソースです。
表示した際にセルがずれていません。

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

displayプロパティについて勉強するきっかけになりました