1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

table要素をdisplay:noneから表示に切り替える際の注意点

Last updated at Posted at 2024-11-02

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

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

image.png

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

display: table-cell

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

image.png

image.png

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

display: table-row

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

image.png

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

display: blockとは

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

td要素をdisplay:noneから表示に切り替える際にスタイルがズレた理由 🚨

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

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

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

参考 ✨

最後に

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?