jQuery：横並びにしたtableの各行の高さを揃える

だま
だま

横並びにした要素の高さを揃えられるjQueryプラグインとして、かなりお世話になっている「matchHeight.js」。

matchHeight.js（外部リンク）

このプラグインを使用して、floatで横並びにした2つのtableの行の高さを揃えられないかな？と思い試してみました。

tableHeight01.png

なぜ2つのtableを並べているのかというと、スマホから閲覧した時はこのように

tableHeight04.png

上下に並ぶような状態にしたかったからです。

更新の度に手動で高さを設定してもいいのですが、毎回毎回<tr style="height: ○○px">のような記述をポチポチ入れるのはなかなか手間です。

なので、matchHeightを使用してこんな感じで...

$(function() {
    $('table tr').matchHeight();
});

結論：だめでした！

原因：「matchHeight.js」が効いてくれるのは『隣接している要素』のみ。

下記のように

$(function() {
    $('ul li').matchHeight();
});
<ul>
    <li>高さが揃うよ</li>
    <li>高さが揃うよ</li>
    <li>高さが揃うよ</li>
    <li>高さが揃うよ</li>
    <li>高さが揃うよ</li>
</ul>

高さを揃えたい要素が隣接していればしっかり揃えてくれますが、

$(function() {
    $('table tr').matchHeight();
});
<div>
    <table class="table01">
        <tr>
            <td>高さが揃わないよ</td>
        </tr>
        <tr>
            <td>高さが揃わないよ</td>
        </tr>
    </table>
    <table class="table02">
        <tr>
            <td>高さが揃わないよ</td>
        </tr>
        <tr>
            <td>高さが揃わないよ</td>
        </tr>
    </table>
</div>

今回のケースのように隣接していない要素は高さを揃える事ができないようです。

効かないものは仕方がないので、jQueryで組んでみました。

各行ごとに高さを取得し、より高い方の数値をtr要素に設定します。

$(function(){
    //tableの行数を取得
    var tableLine = $(".table01 tr").length;
    //各行ごとに処理
    for (var i=0; i<tableLine; i++) {
        //行の高さをtable01・table02でそれぞれ取得
        var tableLineHeight01 = $('.table01 tr').eq(i).innerHeight();
        var tableLineHeight02 = $('.table02 tr').eq(i).innerHeight();
        //高さの数値が大きい方に合わせる
        if(tableLineHeight01 > tableLineHeight02){
            $(".table02 tr").eq(i).css("height",tableLineHeight01 + "px");
        } else if(tableLineHeight02 > tableLineHeight01){
            $(".table01 tr").eq(i).css("height",tableLineHeight02 + "px");
        } else {
            ;
        }
    }
});

デモページ

検証ツールなどで確認すると、trに高さが指定されているのが分かると思います。

すると

tableHeight02.png

いい感じ。

こんな風に高さがかなり偏っても、ちゃんと揃えてくれます。

tableHeight03.png

用途は限定されそうですが、もしかしたらどこかで使えるかもしれません。

関連記事