[西澤颯]

【お使いの Snow Monkey のバージョン】 15.18.1
【お使いの Snow Monkey Blocks のバージョン】13.7.3
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】Google Chrome
【当該サイトのURL】https://balloon-deko.com

### 実現したいこと
いつもありがとうございます。

Woocommerceのバリエーション表示のtable属性をカスタマイズして見やすくしたいです。

https://balloon-deko.com/product/balloon-box-color/

こちらの商品なのですが、色のカスタマイズを細かくできるようにするために
バリエーションを増やしたのですが、
そうするとtableが醜くなってしまって…。

https://balloon-deko.com/product/%e3%83%90%e3%83%ab%e3%83%bc%e3%83%b3%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9/

こんな感じでシンプルに見やすくしたいのですが、
教えていただいてもよろしいでしょうか…？

何卒よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[GONSY]

こんにちは。

これはCSSのみで実現できると思います。

table.variations th.label, table.variations td.value {
	width: 100%;
	display: block;
	text-align: left;
}

この場合は以下のようになります。

　

.product form.cart .variations select {
	max-width: 145px;
	/* selectの幅を任意の数値で指定 */
}
table.variations th.label {
	text-align: left;
}

この場合は以下のようになります。

　
見やすいのは前者でしょうか。
「CSS　table　レスポンシブ」などでGoogle検索すると、参考になる記事がたくさん出てくると思います。
お試しくださいませ。

♥ 2

いいねをした人:

[西澤颯]

できました！
CSSで解決できるんだろうな…。
と思いつつもこのコードが分からなかったので
とても助かりました。

できるだけ自分で解決できるように頑張っていきます👍

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

@西澤さん
解決済みの場合はトピックを閉じていただけると助かります！

♥ 1

いいねをした人:

[投稿者]

投稿