エディターでテーブルを作成しています。
<table style=”border-collapse: collapse; width: 100%; height: 58px;”>
<tbody>
<tr style=”height: 29px;”>
<td style=”width: 10%; height: 29px;”></td>
〜中略〜
<td style=”width: 10%; height: 29px;”></td>
</tr>
</tbody>
</table>
スマホの画面を指で左右に振ってみてください。
| 商品会社 | アマゾン | 楽天 | ヤフー |
|---|---|---|---|
| サンプル1 | 12,000 | 11,000 | 11,200 |
| サンプル2 | 11,230 | 11,560 | 12,000 |
| サンプル3 | 9,800 | 1,1000 | 9,300 |
スマホの画面がカクカクするじゃろう
| AFFINGER5 | THE THOR | STORK19 | DIVER | SWALLOW | SANGO | JIN | Genesis | Coccn | |
| ○○ | ○○ | ○○ | ○○ | ○○ | ○○ | ○○ | ○○ | ○○ |
これだと、見栄えが悪いので修正をしましょう。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]
<div class=”scroll-box”><table style=”border-collapse: collapse; width: 100%; height: 58px;”>
<tbody>
<tr style=”height: 29px;”>
<td style=”width: 10%; height: 29px;”></td>
〜中略〜
</tr>
</tbody>
</table></div>
[/st-mybox]
上のように<table>の前に<div class=”scroll-box”>、終わりに</div>を入れてあげると、テーブルが横にスクロールするようになり横づれが無くなります。
これを修整したのがAFFINGER5 横づれ解決策です。
