【html.css.java】営業日カレンダーの幅調節について

いつもお世話になっております。
現在シンクグラフィカの営業日.定休日カレンダーサンプルを使い、カレンダーを作成しています。
自分で作成した可変グリッドのホームページにそのカレンダーを組み込む予定なのですが、カレンダーの幅調節がうまくいきません。具体的にcssのどの部分をいじればいいのでしょうか？
カレンダーのテーブルそのものが大きく、入れたい枠からはみ出てしまいます。

また、もともと入っていた<div id="cal0" class="cal_wrapper”>calender loading</div>を、<div class="fluid cal"></div>で囲ってはみたのですが、この作業は必要ないのでしょうか？

お分かりになる方いらっしゃいましたら、ご教授ください！

No.1 回答者： fujillin 回答日時： 2015/09/25 10:50

デモページをざっと見ただけですが・・・

オリジナルのものはテーブル表記のカレンダーになっていて、特別複雑な指定はしていないようです。
　table - tbody - tr - td - div
という構成になっていて、セル内のdivにだけCSSで指定をしているようですね。（あとは、ブラウザの編集に任せているというかたち）

直接サイズを指定してはおらず、divのフォントサイズ10pxでパディングを1px 15pxにしているようです。
単純に左右のパディングを0にすればその分だけ横幅は縮まります。
さらに小さくしたければ、セルに直接width、heightを指定すればそのサイズになるでしょう。
ただし、表示内容がはみ出す可能性があり、その際は表示が優先されますので、表示内容を調節するか、あるいはoverflow:hiddenなどで無視するようにするとか・・・

全体のテーブルサイズだけ指定するとあとは調節してくれるといのが便利そうな気もしますが、文字サイズをどのように設定しておくかなどがちょいと問題になりそうなので、結局、とっちもこっちもかな。