rowspanでセル結合してレイアウトが崩れた場合の対処法！

rowspanでセル結合したテーブルのレイアウトが崩れる場合に考えられるのは、高さが足りていないか、CSSで高さの設定をする要素を間違えているかのどちらかです。

サンプルコードを用意したので、例を見てみましょう。

このようにtable要素にrowspanを設定しているのに効いていないことが分かります。

この場合なぜ効いていないかというと、td要素に高さを設定してしまっているからです。

ではこの対処法について以下の項目で解説します。

では先ほどのサンプルコード1つ目に対して、rowspanでセル結合してテーブルのレイアウトが崩れる場合の対処法について解説します。

サンプルコード1つ目ではtd要素に対して、高さを設定してしまっていたがためにレイアウトが崩れました。

この対処法としてはtr要素に対して高さを設定するです。

ではサンプルコードで実際の挙動を確認してみましょう。

このようにtr要素に対して高さを設定してあげることで、rowspanでセル結合してレイアウトが崩れることなくテーブルを表示できます。

また高さを設定しないがためにrowspanが効かないということがよくあるので、rowspanを用いるときは必ず高さを設定しましょう。

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

ここで紹介したようにrowspanを用いる場合は、高さを設定しておいた方が良いです。
また高さを設定する場合はtr要素に対して設定するようにしましょう。

ぜひ皆さんもrowspanを用いて、テーブルを作成してみてください。