ワードプレスカスタマイズ

AFFINGER5（アフィンガー）のテーブルの横づれ

パソコンからは変化の確認ができません。確認はスマートフォンでお願いします

エディターでテーブルを作成しています。

<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>

スマホの画面を指で左右に振ってみてください。

商品会社アマゾン楽天ヤフー
サンプル112,00011,00011,200
サンプル211,23011,56012,000
サンプル39,8001,10009,300

スマホの画面がカクカクするじゃろう

 AFFINGER5THE THORSTORK19DIVERSWALLOWSANGOJINGenesisCoccn
 ○○○○○○○○○○○○○○○○○○

これだと、見栄えが悪いので修正をしましょう。

<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>

上のように<table>の前に<div class="scroll-box">、終わりに</div>を入れてあげると、テーブルが横にスクロールするようになり横づれが無くなります。

これを修整したのがAFFINGER5 横づれ解決策です。

-ワードプレスカスタマイズ