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

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

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

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

一例として、下記にデモをご用意しましたのでお試しください。「表示切替」を押下すると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要素に限らず、表示・非表示を切り替える際に参考にしていただければと思います。

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

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

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

無事レイアウトが崩れることなく表示・非表示を切り替えることができました!

最後に

いかがでしたでしょうか。

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

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