display:table-cellはtd,th要素にデフォルトで設定されています。
tableのセル、行の表示を切り替える際のdisplayプロパティの設定値はデフォルトで設定してある値にするのが無難です。
背景 🖼️
td要素をデフォルトで非表示にして、条件によって表示非表示を切り変える実装をしていました。
その際、表示に切り替えるとスタイルずれが起こりました。
See the Pen sample display:table-cell by 山根大生 (@uuylkesg-the-styleful) on CodePen.
display:tableとは 💡
display: table
テーブルの行と列が適切にレイアウトするために使用されます。
ブラウザのデフォルトのスタイルシートでtable要素に指定されます。
display: table-cell
tableのセルのスタイルを指定します
ブラウザのデフォルトのスタイルシートでtd要素,th要素に指定されます。
display: table-row
tableの行のスタイルを指定します
ブラウザのデフォルトのスタイルシートでtr要素に指定されます。
display: blockとは
ブロック要素として扱われるため、常に新しい行から開始し幅全体を占有します。
ブロックレベル要素の前後に自動的に改行が挿入されます。
td要素をdisplay:noneから表示に切り替える際にスタイルがズレた理由 🚨
テーブル内での正しい表示と機能を維持するためにはtd,th要素でデフォルトのdisplay:table-cellを使用すべきでしたが、display:blockを使用した為です。
以下が修正後のソースです。
表示した際にセルがずれていません。
See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.
参考 ✨
最後に
displayプロパティについて勉強するきっかけになりました