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

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

[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 横づれ解決策です。

タイトルとURLをコピーしました