Docy Child

テーブル(表)に罫線を表示したい

テーブルに罫線を加えたい。

商品説明などにおいてテーブル(表)を使用する場合があると思います。

『MISEル』テーマのデザインにおいてテーブルの表示は罫線がなしで表示されます。

罫線を表示させる簡易な方法

より細かいデザインの調整を行いたい場合は、HTMLやCSSなどに詳しいShopifyパートナーを雇うなどすることをおすすめいたしますが、下記簡単な罫線の加えかたをご紹介します。

テーマ設定> カスタムCSS

テーマのカスタマイズ画面を開きテーマ設定下部にある「カスタムCSS」に下記のコード加えます。

				
					table,
td,
th {
  border: 1px #000000 solid;
}
				
			

すると下記のようにテーブルに罫線を加えることができます。

CSSの詳しい解説は割愛しますが、

○px で罫線の太さ

#○○○○○○ の16進法のカラーコードで罫線の色

solid の部分で罫線のタイプを選べます。

例えば下記の場合、太さが3ピクセル・色が赤・罫線のタイプがダッシュ線になります。

				
					table,
td,
th {
  border: 3px #ff0000 dashed;
}