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; |
See the Pen trタグを表示・非表示 by miccyome (@miccyome) on CodePen.
コメント
コメント一覧 （3件）
[…] さくらいらぼWEB版 /個人ブログ Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因 Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする… […]
[…] さくらいらぼWEB版 /個人ブログ Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因 Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする… […]
[…] さくらいらぼWEB版 /個人ブログ Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因 Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする… […]