JavaScript

Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因

スポンサードリンク
スポンサードリンク

Javascriptでdisplay:block,display:noneを切り替えて
要素の表示・非表示をする場合があります。

同じ方法でtable trの表示・非表示を切り替えた場合
レイアウトズレが発生します。

原因はtrタグの初期設定されているdisplayの値がblockではないことが原因です。

trの場合の初期値はblockではなく「table-row」

そのためtrの表示・非表示をする場合、displayを使ってtable-rowとnoneを切り替えると
うまくいきます。

tableで使うタグのdisplay初期値

今後はまらないようにするためにはtableで使うタグのdisplay初期値を覚えておくことが必要です。

table要素display: table
thead要素display: table-header-group
tbody要素display: table-row-group;
tr要素display: table-row;
th要素display: table-cell;
td要素display: table-cell;
tfoot要素display: table-footer-group;
tr要素の表示・非表示をdisplayのblock・noneで切り替えるとレイアウトが崩れてしまう | Into the Programより引用

See the Pen trタグを表示・非表示 by miccyome (@miccyome) on CodePen.

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-JavaScript
-

© 2021 さくらいらぼWEB版 /個人ブログ