tr要素の表示・非表示をdisplayのblock・noneで切り替えるとレイアウトが崩れてしまう

こんにちは、Ryohei（@ityryohei）です！

本記事では、tr要素の表示・非表示を切り替えた際に表示が崩れてしまう場合の対処方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

問題点

tableの行の表示・非表示を切り替える処理を実装する場合、スクリプト側ではなく、tr要素にclassを付けて切り替える方法を採用する場合があります。（バックエンドとの兼ね合いも考慮して）

そうすると、真っ先に思いつく方法がdisplay: block;とdisplay: none;を切り替える方法ですが、tr要素をこの方法で切り替えると表示が崩れる場合があります。

一例として、下記にデモをご用意しました。「表示切替」を押下するとtableのメールアドレスの行の表示・非表示が切り替わります。表示された場合にメールアドレスの行を確認すると表示が崩れているかと思います。

See the Pen TR Display Block None1｜Web by ryohei (@intotheprogram) on CodePen.

結論： table-rowで切り替える

tr要素の表示・非表示を切り替える場合はdisplayの値に下記を指定することで、この問題は解決します。

display: table-row;

普段、コーディングする上であまり意識しないと思いますが、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要素にフォーカスして解説していますが、tr要素に限らず、他の要素の表示・非表示を切り替える際に参考になるかと思います。

実際にtable-rowで表示・非表示を切り替えてみる

冒頭で簡単に表示・非表示を切り替えた際にレイアウトが崩れるデモをご紹介しましたが、今度はdisplay: table-rowを使用して切り替えを行ってみます。

See the Pen TR Display Block None2｜Web by ryohei (@intotheprogram) on CodePen.

無事メールアドレス行のレイアウトが崩れることなく表示・非表示を切り替えることができていますね！

最後に

普段コーディングをする中で、各要素に設定された初期値を意識することですっきりしたコーディングができるようになるかと思います。私もなるべく気を付けてコーディングしていこうと思います！

以上、tr要素の表示・非表示をdisplayのblock・noneで切り替えるとレイアウトが崩れてしまう場合の対処方法のご紹介でした！