楽天の納期情報で見づらい状態を回避しよう！

楽天の納期情報で買い物かごの表が見づらい状態を回避しよう！

前回、納期情報の赤文字を直すエントリーを書いたかと思いますが

今度はその納期情報が何故か
お店によっては、
項目選択肢の横ラインに入ってる
文字に対してセルの幅が決まってしまって
とても見づらい・・・と
お困りではないですか？

例えば横ラインに　M、L　と入ってたとしたら

M　の文字サイズに合わせて
納期情報が改行されて
なんとも細いセルになってしまって
タブレットで回覧した時に、ラジオボタンが
押しにくくなるという事が・・・

そして、今回は
納期情報を改行しないようにする事と、
ラジオボタンを大きくする事を
記事にしてみました＾＾

納期情報の文字色と、文字サイズは
前回同様
こちらのCSSで対応できます。

td.inventory font{
	font-size:11px;
	color:#999;
}

そこに、セル内の自動的な折り返しを禁止する
値を入力します。

それが
white-space: nowrap;

td.inventory font{
	font-size:11px;
	color:#999;
	white-space:nowrap; /* セル内の自動的な折り返しを禁止 */
}

に修正してCSSをアップしてみてください。
納期情報が、改行されずに一行になり
スッキリしましたね！！！

店舗によっては、納期情報に
沢山のテキストを入れてる所があると
思います。その場合は改行が無視されるので
表が横長になってしまって
商品ページのレイアウトが崩れてしまう
原因となります。。。

なので、短い文章の納期情報にするか、
フォントサイズを小さくするなどの
対策をとってください。

さらに、納期情報のテキストギリギリにセルの枠が
きてしまっているので
なんだか窮屈なイメージに思えるので
余白を追加します。

td.inventory font{
	font-size:11px;
	color:#999;
	white-space:nowrap; /* セル内の自動的な折り返しを禁止 */
	padding-left: 10px;
    　　padding-right: 10px;
    　　display: block;
}

無理やりですが・・・ブロック要素にして
パディングをつけました。

これで、ゆったりとした
見やすい表が出来上がると思います。

おまけに、ラジオボタンの拡大です

/* ラジオボタンのサイズ */
input[type=radio] {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

こちらのCSSで指定してあげれば
ラジオボタンの●が大きくなっていると思います＾＾

PC、タブレット用でスマフォはあまり関係ありませんが・・・

20pxにすれば目立つかなと思います。