こんにちは、ryohei(@ityryohei)です!

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

tr要素をdisplay: block、noneで切り替えると崩れてしまうんだけど、どうすればいいんだろう?

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

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

問題点

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

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

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

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

結論: 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.31883

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

最後に

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

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