1ページで表示される複数のテーブルの形を揃えるjQuery

Article views342 VIEW

サイトでtableを使用する事が多いと思います。

1つのページで複数のTabeを使用する場合、見た目がガタガタになってしまいます。

2017 01 13 21 10 30 - 1ページで表示される複数のテーブルの形を揃えるjQuery

このtableのガタツキをjQueryで自動で直してくれるjQueryを発見しました。

コードの記述方法

今回は最初のtrの中にthを入れる型にしました。

<table class="lineup_table01">
<tbody>
<tr>
<th>ごはん</th>
<th>サラダ</th>
<th>飲み物</th>
</tr>
<tr>
<tr>
<td>おにぎり</td>
<td>ポテトサラダ</td>
<td>お茶</td>
</tr>
<tr>
<td>おべんとう</td>
<td>シーザーサラダ</td>
<td>コーヒー</td>
</tr>
</tbody>
</table>

header.phpにjQueryを追加

[[]]の前に追加してください。
<script type="text/javascript">
$(function() {
  cols = $("tr:first th").size();
  for(i=1;i<cols;i++) {
    tmp = 0;
    max = 0;
    $("table").each(function(){
      tmp = $(this).find("td:eq("+(i-1)+")").width();
      if ( tmp > max ) max = tmp;
    });
    $("td:nth-child("+i+")").css('width',max);
    $("td:nth-child("+i+")").addClass("col-"+i);
  }
});
</script>

適応後の結果

ごはんサラダ飲み物
おにぎりポテトサラダお茶
おべんとうシーザーサラダコーヒー

 

弦楽器鍵盤打楽器
ギターピアノドラム
ベースアコーディオンカホン

 

適応されると各thとtdが揃った状態になります。

もし最初のtrの中身がtdの場合

    cols = $("tr:first th").size();
 

    cols = $("tr:first td").size();
 

に変更してください。

参考にしたサイト

jQueryで2つ以上のテーブルの各セル幅を合わせる

Pocket
pinit fg en rect gray 28 - 1ページで表示される複数のテーブルの形を揃えるjQuery
line88x20 - 1ページで表示される複数のテーブルの形を揃えるjQuery
[`evernote` not found]

Leave a Comment

CAPTCHA