福田 お役立ち

レスポンシブ対応でtableを横スクロールさせる

こんばんは!

ここのところ寒かったリ暑かったリで何着ていいか分からいない福田です。

今朝家を出る時は暑かったので、Tシャツ1枚で出社したんですが、夜になってかなり風も強くなってきたので、帰り自転車で帰るの寒そう~ 😥

 

 

最近、やたらとレスポンシブ対応作業をしている気がします。

そこで皆さんも一度は悩んだ事がある、

「レスポンシブ対応時にtableをどう表示させるのが正しいか」

 

スマートフォンなどのデバイスは横幅の表示スペースが限られているので、料金表などの横に長~い<table>を表示させる時に困りますよね!

単純な表組みの物なら、<table>・<tr>・<th>・<td>をdisplay:block;かけて縦組みの表に変更してしまうのが見やすいと思うんですが、

そんな簡単にいかない場合もありますよね~。

そんな時は潔く横スクロールさせてしまいましょう。

 

参考css↓

 

今回は<table>を<div>で後から囲うのが面倒だったので、<tbody>にdisplay:table;をかけました。

あとiPhone用に、「横スクロールできるよっ」て事が分かるように<table>の下にスクロールバーを常時表示させています。

 

あくまでも一例なので、他に何かいい案があれば教えてください!

それでは~。